調度動作后未調用Reducer

Question

我正在嘗試使用來自http://reactboilerplate.com的樣板代碼開始對react / redux進行操作，到目前為止它一直很好。

我想從容器更新我的狀態，並且正在調度這樣的調用：

// This is the method that should tigger the action
updateMoneyValue(newValue);

...

// Here I hope I set up everything correctly...
function mapDispatchToProps(dispatch) {
  return {
    updateMoneyValue: newMoneyValue =>
      dispatch(updateMoneyValue(newMoneyValue)),
  };
}
const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'counterPage', reducer });
const withSaga = injectSaga({ key: 'counterPage', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(CounterPage);

我認為dispatch(updateMoneyValue(newMoneyValue))應該實際上是分派動作並使其到達減速器。 但是實際上發生的是，當我在第一行中執行呼叫時，觸發了我的操作：

export function updateMoneyValue(moneyValue) {
  console.log('Action has fired.');
  return {
    type: UPDATE_MONEY_VALUE,
    moneyValue,
  };
}

但是減速器永遠不會運行：

function counterPageReducer(state = initialState, action) {
  switch (action.type) {
    case UPDATE_MONEY_VALUE:
      console.log('Reducer was called.');
      state.set('moneyValue', action.moneyValue);
      return state;
    default:
      return state;
  }
}

我試圖找到解決方案，但我真的堅持這一解決方案，不勝感激！

最好的問候，A香。

Answer 1

更改：

state.set('moneyValue', action.moneyValue);

至：

state = state.set('moneyValue', action.moneyValue);

編輯：這樣，您可以“設置新狀態”，而無需state =您正在更改狀態，但不使用更改后的狀態來稍后返回它

Answer 2

當您映射狀態或調度時，您的方法將在道具中可用。

// This is the method that should tigger the action
this.props.updateMoneyValue(newValue);

Answer 3

當您調用updateMoneyValue(newValue) ，您沒有在分派操作，而是直接在調用操作創建者。

要通過Redux，您需要調用this.props.updateMoneyValue(newValue)