Question

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

});

Answer 1

好像你没有用密钥canSubmit创建reducer。这取决于您的商店配置，更具体 - 关于如何从reduce文件导入默认导出。这里要提到的另一件事是，你可能会有名为canSubmit和密钥canSubmit的reducer，所以你需要在代码state.canSubmit.canSubmit中引用它 - 你是从reducer上的动作处理程序返回对象，而不是简单的true或false布尔值。

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

1 个答案: