Redux Store updated, but isn't reflected in mapStateToProps

Question

I've been trying to pull data from a foreign exchange API, but I'm a little stumped to as why changes aren't reflected through mapStateToProps.

In essence, I'm trying to make a call to the api through an action creator. Here is the action creator.

export const fetchTimeData = (currency, date) => {
    return async (dispatch) => {
    const res = await axios.get(`http://api.fixer.io/${date}?base=${currency}`);

    const temp  = res.data.rates;
    var arr = Object.keys(temp).map(function (key) { 
      return (
          temp[key]
      ); 
    });

    var arr2 = Object.keys(temp).map(function (key) { 
      return (
          key
      ); 
    });

    var empty = [];

    for(var i = 0; i < arr.length; i++){
      empty[i] = {title: arr2[i], value: arr[i]};
    }

    _.remove(empty, {title: 'IDR'});
    _.remove(empty, {title: 'KRW'});
    _.remove(empty, {title: 'HUF'});

    empty.sort((a, b) => {
        var titleA = a.title.toLowerCase()
        var titleB = b.title.toLowerCase()
        if (titleA < titleB) //sort string ascending
            return -1 
        if (titleA > titleB)
            return 1
        return 0 //default return value (no sorting)
    })

    dispatch({type: FETCH_TIME_DATA, payload: empty});
  }
};

This action is being called from the calculateDays function in another file. The enumerateDays function returns an array of dates between the desired date and the current date. For example, ["2017-08-10", "2017-08-11", "2017-08-12", "2017-08-13", "2017-08-14", "2017-08-15", "2017-08-16", "2017-08-17", "2017-08-18", "2017-08-19"]

In calculateDays, the action creator is being called, which in turn is an async call to the api I'm using.

componentWillMount() {
    this.calculateDays();
}

calculateDays() {
    var currentDate = moment();
    var hold = enumerateDays('2017-8-10', currentDate);

    var days = [];
    var firstDay = hold[0];
    var currencies;

    days = hold.map((date) => {

        var inBetween = calculateBetween(firstDay, date);
        this.props.fetchTimeData(this.props.base, date);

        console.log("this is tempData", this.props.saveTime)

        return(
            {
                currencies: 'test',
                date: date,
                days: inBetween
            }
        )
    })

}

render(){

    const margins = { top: 50, right: 20, bottom: 100, left: 60 };
    const svgDimensions = { width: 1400, height: 800 };

    var data = [
      {
          "age": 39,
          "index": 0
      },
      {
          "age": 38,
          "index": 1
      },
      {
          "age": 34,
          "index": 2
      },
      {
          "age": 12,
          "index": 3
      }
  ];

  //for color, pass the array of colors to the redux store then pop off from the beginning into chartSeries

  var chartSeries = [
      {
        field: 'age',
        name: 'USD',
        color: '#ff7f0e',
        style: {
          "stroke-width": 2,
          "stroke-opacity": .2,
          "fill-opacity": .2
        }
      }
    ]

    //iterate over a list of years and calculate days from using moment
    //the data will have years, but the function down here will change it
    //set the very first index date as the "from" date in moment.js
    var x = function(d) {
      return d.index;
    }

    return(
        <div>
            <LineChart
                margins= {margins}
                width={svgDimensions.width}
                height={svgDimensions.height}
                data= {data} 
                chartSeries= {chartSeries} 
                x= {x}
            />
            {console.log(this.props.saveTime)}
        </div>
    );
}

function mapStateToProps(state) {
    return {
        saveTime: state.data.currencyTime
    };
}

export default connect(mapStateToProps, actions)(DateChart);

Lastly, this is my reducer.

const INITIAL_STATE = {
    currency: fakeData,
    currencyTime: []
}

export default function(state = INITIAL_STATE, action) {
    switch (action.type){
        case FETCH_DATA:
            return {...state, currency: action.payload};
        case FETCH_TIME_DATA:
            return {...state, currencyTime: action.payload};
        default:
           return state;
   }
}

I've tried debugging with redux logger and I see that the action is being fired correctly https://i.sstatic.net/vx2Qf.jpg. However, I still get returned an empty array.

In my other similar action creator, I get the data from the api and mapeStateTo props with no problem.

I feel like I'm missing a key part of understanding how the redux store updates in the Component lifecycle, but I'm not sure what exactly. The repo is here if you would like to take a closer look https://github.com/kudou-reira/forexD3

Answer 1

Have you added your reducer in your combineReducer?