在 react-redux 中收到错误“在动作中检测到​​不可序列化的值，路径：`payload`。值：\”

Question

我在 react-redux 上的 add user 和 remove user 中写了一个函数。但我在这个功能上遇到错误

redux 中的用户 Slice.js

import { createSlice } from "@reduxjs/toolkit";

const userSlice = createSlice({
  name: "users",
  initialState: {
    users: {
      id: "",
      name: "",
      email: "",
    },
  },
  reducers: {
    addUser: (state, action) => {
      state.users = action.payload;
    },
    removeUser: (state) => {
      state.users = "";
    },
  },
});

export const { addUser, removeUser } = userSlice.actions;
export default userSlice.reducer;

删除用户函数返回一个空字符串。屏幕上的值为空。

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { removeUser } from "../Slices/userSlice";
import {} from "react-redux";

const User = () => {
  const users = useSelector((state) => state.users.users);
  const dispatch = useDispatch();
  console.log(users);

  const removeuser = (state) => {
    dispatch(removeUser(state));
  };
  return (
    <div>
      <h1>{users.id}</h1>
      <h2>{users.name}</h2>
      <h3>{users.email}</h3>

      <button type="" onClick={removeuser}>
        Remove User
      </button>
    </div>
  );
};

export default User;

这个函数的解决方案是什么

Answer 1

我在您的错误消息中看到的是您在操作有效负载中传递了一个 React 事件。

为什么会这样？ onClick 属性是一个以点击事件作为参数调用的函数。

<button type="" onClick={removeuser}>

所以removeuser 的参数需要是(event) => {。或者，如果您不需要访问该活动，则可以使用 () => {。没有任何场景可以将 state 变量作为参数有意义。

---

当您调用 Redux Toolkit 操作创建函数时，您传递给该函数的参数将变为 action.payload。

按照现在设置切片的方式，removeUser 减速器不使用action.payload，因此它不需要参数。您只需致电dispatch(removerUser())。

const onClickRemove = () => {
    dispatch(removeUser());
};

/* ... */
<button onClick={onClickRemove}>

或者

<button onClick={() => dispatch(removeUser())}>

---

您的应用程序是否有多个用户？随着您开始更多地了解事物，您的userSlice 可能会发展。您最终可能会得到一组用户，在这种情况下，您的 removeUser 操作将需要知道要删除哪个用户。

就像是：

import { createSlice } from "@reduxjs/toolkit";

const userSlice = createSlice({
  name: "users",
  initialState: {
    users: []
  },
  reducers: {
    // Payload is an array of user objects.
    setAllUsers: (state, action) => {
      state.users = action.payload;
    },
    // Payload is a single user object.
    addUser: (state, action) => {
      state.users.push(action.payload);
    },
    // Payload is the id of the user to remove.
    removeUser: (state, action) => {
      state.users = state.users.filter(user => user.id !== action.payload);
    },
  },
});

export const { setAllUsers, addUser, removeUser } = userSlice.actions;
export default userSlice.reducer;

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { removeUser } from "../Slices/userSlice";

const UsersList = () => {
  const users = useSelector((state) => state.users.users);
  console.log(users);

  return (
    <div>
       {users.map(user => (
          <UserListItem key={user.id} user={user}/>
       ))}
    </div>
  );
}

const UserListItem = ({ user }) => {
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{user.id}</h1>
      <h2>{user.name}</h2>
      <h3>{user.email}</h3>

      <button onClick={() => dispatch(removeUser(user.id))}>
        Remove User
      </button>
    </div>
  );
};

export default UsersList;