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

前端之家收集整理的这篇文章主要介绍了javascript – React / Redux:mapStateToProps实际上并没有将状态映射到props前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

>触发一个方法
>让该方法触发动作创建者
>发送一个动作
>在reducer中捕获该动作并创建一个新的更新状态
>查看Redux DevTools中的更新状态

但是,启用/禁用功能仍然不起作用,因为似乎mapStateToProps和connect实际上并没有将状态映射到props.我正在跟踪canSubmit,它在状态内发生变化但在道具中未定义.成功将状态映射到道具我错过了什么?

相关代码

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({},{
      canSubmit: false
    });
  }

});
最佳答案
好像你没有使用key canSubmit创建reducer.这取决于您的商店配置,更具体 – 关于如何从reduce文件导入默认导出.另外要提到的是,你可能会有名为canSubmit的减速器和一个密钥canSubmit,所以你需要在像state.canSubmit.canSubmit这样的代码中引用它 – 你要从reducer上的动作处理程序返回对象,不是简单的true或false布尔值.

猜你在找的JavaScript相关文章