React-Redux增量/减量问题

Question

我正在做一些React-Redux实践，我注意到一个我无法理解的行为:它的工作与否取决于我是否使用+ 1/- 1或++/——操作符。

这是我的减速机:

const counterReducer = (state = { counter: 0 }, action) => {
switch (action.type) {
case "INCREMENT":
return {
counter: state.counter + 1,
};
case "DECREMENT":
return {
counter: state.counter - 1,
};
default:
return state;
}
};

，它工作得很好

但是如果我把自增和自减改为

const counterReducer = (state = { counter: 0 }, action) => {
switch (action.type) {
case "INCREMENT":
return {
counter: state.counter++,
};
case "DECREMENT":
return {
counter: state.counter--,
};
default:
return state;
}
};

它仍然会触发操作而不更新Redux状态。

Answer 1

因为在第二个减速机中您使用prefix算子:

const counterReducer = (state = { counter: 0 }, action) => {
switch (action.type) {
case "INCREMENT":
return {
counter: state.counter++, //<--- prefix operator
};
case "DECREMENT":
return {
counter: state.counter--, //<--- prefix operator
};
default:
return state;
}
};

如果使用++操作符作为前缀，如:++var, var的值加1;然后返回值

如果使用++操作符作为后缀，如:var++，则首先返回var的原始值;var加1.

因此需要在counterReducer中使用postfix运算符而不是prefix运算符:

const counterReducer = (state = { counter: 0 }, action) => {
switch (action.type) {
case "INCREMENT":
return {
counter: ++state.counter, //<--- postfix operator
};
case "DECREMENT":
return {
counter: --state.counter, //<--- postfix operator
};
default:
return state;
}
};

Answer 2

在redux reducer中不应该使用自增/自减操作符，因为状态是不可变的。您的第一个示例是Redux中的首选模式:https://redux.js.org/faq/immutable-data#why-is-immutability-required-by-redux

然而，你看到这种行为的原因是因为const y = x++赋值，然后增加x。如果你想增加然后赋值，你需要执行const y = ++x。

c++中的递增-何时使用x++或++x?

Answer 3

state.counter++更新state的值。Counter inplace，这是一个动作。该点的值仍然为1。

可以，

state.counter++;
return {
counter: state.counter,
};