Question

我有一个react / redux应用程序，它有一个recharts图表，可以在数据更改时激活。

我正在使用Redux，我的大部分操作只会更改一个state属性，从而导致单props次传递。但是，我的一些操作现在使用thunks进行某些异步操作并调用其他操作。

例如，我可能有一个动作getChartData，当用户选择一个轴时会调用它。

export let getChartData = axis => dispatch => {
  // trimmed for brevity
  fetchJSON(url).then(data => {
    dispatch(dataRetrievalSuccess(data));
    dispatch(updateSelectedAxis(axis));
  }).catch(error => {
    dispatch(dataRetrievalError(error));
  });
};

在此示例中，updateSelectedAxis值将更改负责显示当前所选轴的本地状态属性，dataRetrievalSuccess函数将负责将props.data传递给图表。

我试图解决的问题是当组件的selectedAxis道具发生变化但数据没有变化时，阻止图表更新。

我以为我可以使用componentWillRecieveProps这样的内容，但我在上面的thunk示例中遇到的问题是，当我调用{{componentWillRecieveProps时，我会调用dataRetrievalSuccess 1}} this.props.data和nextProps.data中的数据相同，因此我可以阻止更新。但是，当我随后调用updateSelectedAxis时，我没有将data作为道具的一部分，因为它已经被更改，所以我无法根据这两个值执行逻辑运算。

我认为这可能是一个订购问题，但即使我将其打包成一个动作，我仍然可以获得多个道具设置。

我是否可以通过将数据和轴的更改打包成单个对象来解决此问题？我不太确定这种建筑方式的最佳方式，并欢迎任何建议。

修改只是为了扩展一点，我发出了两个动作，两个动作都改变了自己的状态，导致两个渲染。

我尝试过写这样的东西：

shouldComponentUpdate(nextProps, nextState) {
  if(this.dataHasChanged(nextProps)) {
    return true;
  }
  return false;
}

这几乎可以工作，但每次图表显示的数据都是一个渲染背后所需的位置。

Answer 1

您可以使用thunk访问动作创建者下的当前商店状态（因为thunk为您注入状态。），然后将ajax响应数据与先前的状态数据进行比较以发送新动作。

 export let getChartData = axis => (getState, dispatch) => {
          // trimmed for brevity
          fetchJSON(url).then(data => {
           if(getState().data !== data){
            dispatch(dataRetrievalSuccess(data));
            dispatch(updateSelectedAxis(axis));
            }
          }).catch(error => {
            dispatch(dataRetrievalError(error));
          });
        };

防止来自多个道具的组件更新做出反应

1 个答案: