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

IT技术 javascript reactjs redux
2021-04-26 17:43:11

我在一个项目中使用 React 和 Redux,但在实现启用/禁用按钮的功能时遇到问题。我已经能够:

  • 触发一个方法
  • 让该方法触发动作创建者
  • 发送一个动作
  • 在减速器中捕捉该动作并创建一个新的、更新的状态
  • 查看 Redux DevTools 中的更新状态

但是,启用/禁用功能仍然不起作用,因为它似乎mapStateToProps并且connect实际上没有将状态映射到props。我正在跟踪canSubmit,它在状态内发生变化但undefined在props中。成功将状态映射到props我缺少什么?

相关代码:

用户窗体视图.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
    });
  }

});
1个回答

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