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

Question

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

触发方法
让该方法触发动作创建器
调度一个动作
在减速器中捕捉该动作并创建一个新的更新状态
在 Redux DevTools 中查看更新后的状态

但是，enable/disable 功能仍然不起作用，因为 mapStateToProps 和 connect 似乎并未真正将状态映射到道具。我正在跟踪 canSubmit，它在状态内发生变化，但在 props 中是 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
    });
  }

});

Answer 1

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

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

React / Redux: mapStateToProps not actually mapping state to props

javascript

reactjs

redux