对 redux 状态的副本进行更改也会更新 redux store 上的实际状态

Question

我看到这种行为，如果我将 redux 状态复制到局部变量并更改该变量，它也会更新我的 redux 存储，而无需我使用任何类型的调度，这是我的代码：

// here is my action type inside my reducer 
case SET_USERS:
      return {
        ...state,
        users: action.payload,
      };

// and here i have a helper function to select a specific state and pass it to useSelector later on
export const getUsersSelector = (state: RootState) => {
  return state.app.users;
};

我正在自定义挂钩中像这样访问我的状态useUsers我有

export const useUsers = () => {
   const users = useSelector(getUsersSelector);
   return {users}
}

我正在使用 useUsers 挂钩在另一个组件中访问我的 users 值：

const ListUsers = () => {
    const {users} = useUsers()
    //i make a copy of my users state
    const copyOfUsers = users
    
    //and update the copied variable
    copyOfUsers.push({name: 'John'})

    retunr (<View>{copyOfUsers.map((user)=><Text>{user.name}</Text>)}</View>)
}

我遇到的问题是将一个新项目推送到我的 copyOfUsers 变量也会更新 redux 存储内的 users 状态，我不知道为什么会这样，也不知道这是不是正常行为，只是想知道这是 bug 还是 redux 的故意行为？或者我该如何避免？

Answer 1

您实际上是在更改 users 实例的 shallow copy。

您应该先创建 users 实例的 deep copy，然后再对数据进行操作。

用户是一个 Array 因此，您可以使用 slice 创建深拷贝，然后应该将新对象推送到用户的新副本中。那会阻止在你的 redux 副本中反映突变。

您的代码应如下所示：

 const {users} = useUsers()
 const copyOfUsers = users.slice() // this is actually created a deep copy of your array.

copyOfUsers.push({name: 'John'}) // changing the new memory data 
hence will not reflect in redux state.

对 redux 状态的副本进行更改也会更新 redux store 上的实际状态

Making a change on a copy of a redux state also updates the actual state on redux store

javascript

state

react-native

redux