使用 Redux 在 React 中更新嵌套的 Object

Question

我正在尝试更改用户数组中的状态。 我正在尝试将状态更新为“是”。 我如何能够在不改变 state 的情况下访问其数据？

请查看此代码框链接

点击这里

const dispatch = useDispatch();
  const isLoading = useSelector(state => state.user.isLoading);
  const users = useSelector(state => state.user.users);

  const onApprove = user => {
    dispatch(approveUser(user));
  };

  useEffect(() => {
    dispatch(getUsers());
  }, [dispatch]);

Answer 1

要更改减速器中的 state 而不会发生变异，请尝试以下操作：

    case 'YOUR_ACTION':
        return {
            ...state,
            users: state.users.map((user) =>
                user.id === action.userId
                    ? {
                          ...user,
                          status: 'yes', // or you could action.status
                      }
                    : user,
            ),
        }

我正在映射所有users ，然后将 user.id 与从操作发送的用户进行匹配，并将其状态更改为yes 。 如果不匹配，我们只需返回user

Answer 2

更新approveUser操作以采取并传递user

export function approveUser(user) { // <-- receive user object
  return dispatch => {
    dispatch({
      type: userConstants.APPROVE_USER_REQUEST
    });
    dispatch({
      type: userConstants.APPROVE_USER_SUCCESS,
      payload: {
        approved: "HAHAHHA"
      },
      user, // <-- pass user object
    });
    dispatch({
      type: userConstants.APPROVE_USER_FAILURE,
      payload: {}
    });
  };
}

然后更新reducer以传播更新。使用收到的user object到map新的“是”状态。

case userConstants.APPROVE_USER_SUCCESS:
  return {
    ...state,
    isLoading: false,
    users: state.users.map(user => user.id === action.user.id ? {
      ...user,
      status: 'yes',
    } : user)
  };