调度动作后未调用Reducer

时间:2018-08-26 13:05:06

标签: javascript reactjs redux react-redux

我正在尝试使用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;
  }
}

我试图找到解决方案,但我真的坚持这一解决方案,不胜感激!

最好的问候, y香。

3 个答案:

答案 0 :(得分:0)

更改:

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

收件人:

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

编辑:这样,您可以“设置新状态”,而无需state =来更改状态,但不使用更改后的状态来稍后将其返回

答案 1 :(得分:0)

当您映射状态或调度方法时,道具中会显示可用的

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

答案 2 :(得分:0)

调用updateMoneyValue(newValue)时,您没有在分派动作,而是直接在呼叫动作创建者。

要通过Redux,您需要致电this.props.updateMoneyValue(newValue)