React/Redux:mapStateToProps实际上并没有将状态映射到道具

React / Redux: mapStateToProps not actually mapping state to props

本文关键字：映射 状态 并没有 Redux mapStateToProps 实际上 React      更新时间：2023-09-26

我在一个项目中使用React和Redux，在实现启用/禁用按钮的功能时遇到问题。我已经能够：

  • 触发一个方法
  • 让该方法触发动作创建者
  • 分派行动
  • 在reducer中捕获该操作并创建一个新的更新状态
  • 请参阅Redux DevTools中的更新状态

然而，启用/禁用功能仍然不起作用，因为mapStateToProps和connect实际上并没有将状态映射到道具。我正在跟踪canSubmit，它在状态中发生变化，但在道具中是undefined。要成功地将状态映射到道具，我缺少什么？

相关代码：

UserFormView.js

const mapStateToProps = (state) => ({
  routerState: state.router,
  canSubmit: state.canSubmit
});
const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(ActionCreators, dispatch)
});
class UserFormView extends React.Component {


}
export default connect(mapStateToProps, mapDispatchToProps)(UserFormView);

行动：

export function enableSubmit(payload) {
  return {
    type: ENABLE_SUBMIT,
    payload: payload
  };
}
export function disableSubmit(payload) {
  return {
    type: DISABLE_SUBMIT,
    payload: payload
  };
}

Reducer（使用createReducer辅助函数）:

const initialState = {
  canSubmit: false
};
export default createReducer(initialState, {
  [ENABLE_SUBMIT]: (state) => {
    console.log('enabling');
    return Object.assign({}, state, {
      canSubmit: true
    });
  },
  [DISABLE_SUBMIT]: (state) => {
    console.log('disabling');
    return Object.assign({}, state, {
      canSubmit: false
    });
  }
});

似乎您没有使用键canSubmit创建reducer。这取决于您的存储配置，更具体地说，取决于您如何从reduces文件导入默认导出。这里要提到的另一件事是，您可能有一个名为canSubmit的reducer和一个键canSubmit，所以您需要在类似state.canSubmit.canSubmit的代码中引用它——您从reducer上的操作处理程序返回对象，而不是简单的true或false布尔值。

相关文章：