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

Question

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

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

但是,启用/禁用功能仍然不起作用,因为它似乎mapStateToProps并connect没有实际将状态映射到props.我正在追踪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
    });
  }

});

Answer 1

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

\n