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

Posted 2023-02-21

【中文标题】React / Redux：mapStateToProps 实际上并未将状态映射到道具

【英文标题】：React / Redux: mapStateToProps not actually mapping state to props

【发布时间】：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 之上，所以基本的接线非常可靠。

【参考方案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 应用程序方面确实很棒;-)