How can I change properties of array of state in redux toolkit?-CodePudding

In my case:

const initialState = {
  users: [
    {
      id: "1",
      name: "user1",
      email: "[email protected]",
      isEnter: false,
    },
    {
      id: "2",
      name: "user2",
      email: "[email protected]",
      isEnter: false,
    },
    {
      id: "3",
      name: "user3",
      email: "[email protected]",
      isEnter: false,
    },
  ],
};

const testSlice = createSlice({
  name: "test",
  initialState,
  reducers: {
    enterUser(state, action) {
      // const findUser = state.users.find((user) => user.id === action.payload);
      // findUser.isEnter = true;
    },
    exitUser(state, action) {
      // const findUser = state.users.find((user) => user.id === action.payload);
      // findUser.isEnter = false;
    }
});

I want to find the object of a specific user through id in state.users and change the isEnter property.

However, inside the reducer, state.users appears as a proxy(not an array), so I cannot use the Array.prototype.find().

So I tried using current(state.users).find(), but it was a read-only array, so I couldn't change the isEnter property.

What should I do? Help..

CodePudding user response：

Provide id of user as payload.

   enterUser(state, action) {
            const user = state.users.find(user => user.id === action.payload);
            state user = state.users.filter(item => item.id !== action.payload).concat([{...user, isEnter: !user.isEnter}]);
     },

CodePudding user response：

To find an object in the users array and update one of its properties, you can use the Array.prototype.find() method to locate the object, and then update the property directly.

Here is an example of how you might do this:

const enterUser = (state, action) => {
  // Find the user object with the specified ID
  const user = state.users.find(user => user.id === action.payload);

  // Update the isEnter property of the user object
  user.isEnter = true;

  // Return the updated state object
  return {
    ...state,
    users: state.users,
  };
};

const exitUser = (state, action) => {
  // Find the user object with the specified ID
  const user = state.users.find(user => user.id === action.payload);

  // Update the isEnter property of the user object
  user.isEnter = false;

  // Return the updated state object
  return {
    ...state,
    users: state.users,
  };
};

In this example, the Array.prototype.find() method is used to locate the user object with the specified action.payload, and then the isEnter property of that object is updated directly. Finally, the updated users array is returned as part of the updated state object.

It is important to note that the Array.prototype.find() method returns a reference to the found object, not a copy of the object. This means that you can update the object's properties directly, as shown in the example above.

Additionally, since the users array is part of the Redux state, you will need to return a new state object with the updated users array in order for the changes to be applied. You can do this by using the spread operator (...) to create a new state object and including the updated users array as a property of that object.