如何使用redux增加简单计数器

Question

我想编写简单的计数器增量代码以了解redux。 请修复我的代码

https://codesandbox.io/s/61663y47qn?initialpath=%2F

Answer 1

这是一个有效的版本：

有很多不同的小问题，因此您只需要逐个文件地研究差异即可。

Answer 2

这是您面临的问题

在ActionCreator

中

您有此代码

import * as Types from "./Types";

export const incCounter = state => ({
  Type: Types.INC_COUNTER,
  payload: state++
});

正确的应该是

import * as Types from "./Types";

export const incCounter = state => ({
  type: Types.INC_COUNTER,
  payload: state
});

Type应该为type，并且您不需要在此处增加状态，这应该发生在reducer中。

---

您在counterReducer中拥有

export const counterReducer = (state = counterInitialState, action) => {
  switch (action.Type) {
    case Types.INC_COUNTER:
      return { ...state, state: action.payload++ };
    default:
      return state;
  }
};

正确的代码应为

export const counterReducer = (state = counterInitialState, action) => {
  switch (action.type) {
    case Types.INC_COUNTER:
      return {...state, counter: ++action.payload};
    default:
      return {...state};
  }
};

再次，Type应该是type，并且应该在分配状态之前进行递增，action.payload++是错误的，应该是++action.payload

---

在index.js

中

您有这个

const mapDispatchToProps = state => ({
  updateCounter: () => incCounter(state)
});

应为

const mapDispatchToProps = dispatch => ({
  updateCounter: state => dispatch(incCounter(state))
});

最后，您拥有

<button onClick={incCounter(props.currentCounter)}>Update counter</button>

应为

<button onClick={props.updateCounter.bind(null, props.currentCounter)}>Update counter</button>

您不想执行该函数，您希望将该函数作为单击处理程序传递，并且如果要向其传递一些参数，则可以使用bind函数将其绑定。只需注意传递给bind =>的第一个参数，它是执行上下文而不是函数的第一个参数，您的参数排在第二位。

可在此处找到工作代码。 https://codesandbox.io/s/8nyjxvp2k9