首页 文章

React / Redux：mapStateToProps实际上并没有将状态映射到props

提问于
浏览 次
5

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

  • 触发一个方法

  • 让该方法触发动作创建者

  • 发送一个动作

  • 在reducer中捕获该动作并创建一个新的更新状态

  • 查看Redux DevTools中的更新状态

但是，启用/禁用功能仍然不起作用，因为它似乎 mapStateToProps 和't actually mapping the state to the props. I'跟踪 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
    });
  }

});
javascript reactjs redux

1 回答

  • 3

    好像你没有使用键 canSubmit 创建reducer . 这取决于您的商店配置，更具体 - 关于如何从reduce文件导入默认导出 . 另外要提到的是，'s likely you' ll有名为 canSubmit 的减速器和一个 canSubmit 键，所以你需要在代码中引用它 state.canSubmit.canSubmit - 你在reducer上从动作处理程序返回对象，而不是简单的 true 或 false 布尔值值 .

    回复于

相关问题