React / Redux：mapStateToProps 实际上并未将状态映射到道具答案

【问题标题】：React / Redux: mapStateToProps not actually mapping state to propsReact / Redux：mapStateToProps 实际上并未将状态映射到道具
【发布时间】：2016-02-29 01:05:08
【问题描述】：

我在一个项目中使用 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
    });
  }

});

【问题讨论】：

您是否将应用程序包装在中并传入商店？
是的。那在另一个文件中：render () { return ( <Provider store={this.props.store}> <div> <ReduxRouter> {routes} </ReduxRouter> {this.renderDevTools()} </div> </Provider> ); } 这一切都建立在 @davezuko 的 React-Redux-Starter-Kit 之上，所以基本的接线非常可靠。

标签： javascript reactjs redux

【解决方案1】：

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

【讨论】：

我相信这就是原因。查看 reducer 调用的一种简单方法是在 mapStateToProps 函数中记录状态并查看您的状态树是什么样的：const mapStateToProps = (state) => { console.log(state); return { routerState: state.router, canSubmit: state.canSubmit } };
@Michael 这是存放此类日志的好地方！我建议尝试的另一件事是 redux devtools chrome 插件——它在调试 redux 应用程序方面确实很棒;-)