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-18“，”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 logger进行调试，我发现该操作正在被正确触发http://imgur.com/a/HGHbB。但是，我仍然得到一个空数组。

在我的其他类似动作创建者中，我从api和mapeStateTo道具中获取数据没有问题。

我觉得我错过了理解redux存储在Component生命周期中如何更新的关键部分，但我不确定究竟是什么。如果你想仔细看看https://github.com/kudou-reira/forexD3

，回购就在这里

Answer 1

您是否在combineReducer中添加了减速器？

Redux Store已更新，但未反映在mapStateToProps中

1 个答案: