Reduxストアが更新されましたが、mapStateToPropsに反映されません

Question

私は外国為替APIからデータを取得しようとしていましたが、なぜ変更がmapStateToPropsに反映されないのかが少しわかりません。

本質的に、私はアクションクリエイターを通してapiを呼び出そうとしています。ここにアクションクリエイターがいます。

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}); 
    } 
}; 

このアクションは、別のファイルにcalculateDays関数から呼び出されています。 enumerateDays関数は、希望の日付と現在の日付の間の日付の配列を返します。たとえば、[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-19 "、" 2017-08-19 "]

calculateDaysでは、アクションクリエータが呼び出されています。ターンは私が使用しているAPIへの非同期呼び出しです。

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); 

最後に、これは私のレデューサーです。

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; 
    } 
} 

私はReduxのロガーとデバッグを試みたと私はアクションが正しくhttp://imgur.com/a/HGHbB解雇されていることを参照してください。しかし、私はまだ空の配列を返します。

私の他の同様のアクションクリエイターでは、問題なくapiとmapeStateToの小道具からデータを取得します。

reduxストアがコンポーネントのライフサイクルにどのように更新されているかを理解するための重要な部分が欠落しているような気がしますが、正確にはわかりません。詳細をお知りになりたい場合は、こちらのレポが表示されますhttps://github.com/kudou-reira/forexD3

Answer 1

あなたのコンビネーションレデューサーにレデューサーを追加しましたか？