reactjs 为什么slice push在redux中有效而在concat中无效?

idv4meu8  于 2022-11-22  发布在  React
关注(0)|答案(2)|浏览(125)

最近我换了片,我看到了一些奇怪的行为,有人能解释一下:

const initialState = {
  []
};

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    loadUsers(state, action) {
      state = state.concat(action.payload);
    },
  },
});

当我这样做的时候,状态不会改变,有效负载不会添加到状态数组中
我可以像

for(let i=0; i < action.payload.length; i++) {
    state.push(action.payload[i]
}

一切正常,然后我意识到,如果将状态命名为初始状态,如:

const initialState = {
  users: [],
};

然后我可以这样说:

state.users = state.users.concat(action.payload);

loadUsersreducer上,这个也工作得很好,有人能解释为什么***concat***在第一次尝试时不工作吗?当我有[]的初始状态而没有命名它时

g52tjvyc

g52tjvyc1#

这里的问题不是pushconcat,而是这样一个事实:

state = something

永远不会做任何事。
Redux Toolkit监视 * 变量state * 中的对象是否有修改-但该赋值 * 会丢弃该对象,并将一个新对象放入变量 * 中,而不是更改它。
那是无法观察到的。
相反,您可以

return something

有关更多信息,请参见Writing Reducers with immer,特别是重置和替换状态,其中指出:
一个常见的错误是尝试直接赋值state = someValue。这是行不通的!这只是将局部状态变量指向一个不同的引用。这既不是改变内存中现有的状态对象/数组,也不是返回一个全新的值,所以Immer没有做任何实际的改变。

snz8szmq

snz8szmq2#

在上一个答案的基础上再加上一个区别。你不应该试图改变整个状态,就像下面这行

State = something

但是您可以而且应该以这种方式改变状态属性,事实上这是redux toolkit和immer的主要优点之一,因此

State.prop = something

这是一个很好的时间来重申这种状态的变化只有在redux工具包中才是可以的,immer正在做它的工作。
这里也是相关文档的链接
https://redux-toolkit.js.org/usage/immer-reducers#resetting-and-replacing-state

相关问题