React / Redux：mapStateToProps實際上並沒有將狀態映射到props

Question

我正在項目上使用React和Redux，我在實現啟用/禁用按鈕的功能時遇到問題。 我已經能夠：

• 觸發一個方法
• 讓該方法觸發一個動作創建者
• 派遣行動
• 在reducer中捕獲該動作並創建一個新的更新狀態
• 請參閱Redux DevTools中的更新狀態

但是，啟用/禁用功能仍然不起作用，因為似乎mapStateToProps和connect實際上並沒有將狀態映射到props。 我正在跟蹤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

好像你沒有使用key canSubmit創建reducer。 這取決於您的商店配置，更具體 - 關於如何從reduce文件導入默認導出。 另外要提到的是，你可能會有名為canSubmit減速器和一個密鑰canSubmit ，所以你需要在像state.canSubmit.canSubmit這樣的代碼中引用它 - 你要從reducer上的動作處理程序返回對象，不是簡單的true或false布爾值。