多个React组件没有按顺序触发Redux状态调度

Question

// Component
function FooComponent() {
const dispatch = useDispatch();
const reduxState = useSelector((state) => state.store);
useEffect(() => {
dispatch(updateStore({FooComponent: reduxState.FooComponent + 1}));
return () => {
dispatch(updateStore({FooComponent: reduxState.FooComponent - 1}));
};
}, []);
return <></>;
}
// Redux Slice
const reduxSlice = createSlice({
name: "reduxStore",
initialState: {},
reducers: {
updateStore: (state, action) => {
state = action.payload;
},
},
});

我有这个React组件和Redux切片(严重简化了这个问题)。我的React应用程序渲染N这些FooComponents，当它挂载时，它通过useEffect触发调度。分派操作应该根据reduxState的当前状态更改它的值。然而，由于所有这些组件的N是同时安装的，因此它们都看到相同的"电流"。也就是说，它们都把reduxState.FooComponent = reduxState.FooComponent + 1看成是reduxState.FooComponent = 0 + 1。因此，在我的N组件呈现之后，redux存储显示reduxState.FooComponent = 1而不是reduxState.FooComponent = N。是否有一种方法可以确保调度一个接一个地触发，以便组件可以具有实际的当前Redux状态?我希望尽可能减少Redux片中的更改逻辑，因为它被许多其他组件使用。

我知道我可以创建一个Redux切片动作来增加计数，但这个例子只是我想要的一个简单版本。

Answer 1

这就是为什么我们不建议像updateStore这样的setter操作的完美例子。计算通常应该在商店内进行，而操作应该只是"事件"。向你的商店描述发生了什么

你的逻辑依赖于每一个调度之间的React重新渲染，所以你的reduxState常数可以用状态的新快照重新创建——这不会发生，所以你根据过时的状态进行计算。

我们建议你有一个incrementStore和decrementStore动作。在reducer内部进行实际计算，因为它总是最新的。

useEffect(() => {
dispatch(incrementStore("FooComponent"));
return () => {
dispatch(decrementStore("FooComponent"));
};
}, []);
//...
// Redux Slice
const reduxSlice = createSlice({
name: "reduxStore",
initialState: {},
reducers: {
incrementStore(state, action) {
if (!state[action.payload]) {
state[action.payload] = 0;
}
state[action.payload]++;
},
decrementStore(state, action) {
if (!state[action.payload]) {
state[action.payload] = 0;
}
state[action.payload]--;
},
},
});

也可以读一下Redux风格指南，它有一些关于这个主题的观点。