javascript - React 无法识别 reducer 中的状态变化

Question

我有一个组件，它进行 API 调用，然后通过 reducer 更新状态。问题是，这效果不太好，因为组件中的数据没有更新，就像 react 没有注意到状态变化而从未重新渲染组件一样，但我不确定这是否是真正的问题在这里。所以该组件看起来像这样:

class MyComponent extends Component {
  componentDidMount() {
    // ajax call
    this.props.loadData(1);
  }

  render() {
    return (
      <Grid>
        <MySecondComponent
          currentData={this.props.currentData}

        />
      </Grid>
    );
  }
}

const mapStateToProps = state => ({
  reducer state.myReducer,
  currentData: state.myReducer.currentData
});

const mapDispatchToProps = dispatch => {
  return {
    loadData: () => {
      HttpClient.getData(id, (data) => {
        dispatch(
          action_loadCurrentData(
            data
          )
        );
      });
    },
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

我在这里做了两件事:安装组件后立即发出 API 调用，然后在获取数据后，调度 action_loadCurrentData

此操作如下所示:

// Action

export function action_loadCurrentData(
  data
) {
  return {
    type: 'LOAD_CURRENT_DATA',
    payload: {
      currentData: data,
    }
  };
}

和 reducer :

// reducer

const defaultState = {

};

const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'LOAD_CURRENT_DATA':
      state = {
        ...state,
        currentData: {
          myData: {
            ...state.currentData.myData,
             0: action.payload.currentData
          }
        }
      };
    }
};

export default myReducer;

所以这里的问题是我传递给 MySecondComponent 的 this.props.currentData 最终会变成空，就好像我没有设置数据一样根本不。但是，如果我在调试器中停止执行并给它几秒钟，数据将被正确填充，所以我不确定我在这里做错了什么？

Answer 1

不要重新分配状态，而是返回新创建的对象

 const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'LOAD_CURRENT_DATA':
      return {
        ...state,
        currentData: {
          myData: {
            ...state.currentData.myData,
             0: action.payload.currentData
          }
        }
      };
    }
};

你的reducer需要返回新的状态对象，它需要是与之前状态不同的实例才能触发组件更新。

根据redux documentation :

The reducer is a pure function that takes the previous state and an action, and returns the next state.

和

Things you should never do inside a reducer:

• Mutate its arguments;
• Perform side effects like API calls and routing transitions;
• Call non-pure functions, e.g. Date.now() or Math.random().