React/Redux -更改本地状态或更改Redux状态

bakd9h0s 于 2022-11-12 发布在 React

关注(0)|答案(2)|浏览(264)

我正在使用React和Redux来填充用户列表。我的组件列出了redux存储中的所有用户（数据来自mongodb数据库，如果你好奇的话）。有一个复选框可以选择列表中的所有用户，一旦选中它，应该会选中所有用户的复选框。我认为有两种方法可以做到这一点。
1.使用本地状态（使用useState挂接）并转储处于该状态的所有用户，然后Map用户列表。单击“全选”复选框将为每个用户添加“is_checked”字段，并在迭代过程中仅在“is_checked”字段为true时选中用户复选框。
1.更改redux状态并添加“is_checked”标志，然后按照第1点中的说明执行其余操作。（我认为我们不应该改变状态）
请指示。

import React from "react";
import { useSelector } from "react-redux";

const UserComponent = () => {
  const users = useSelector((state) => state.users["users"]);

  return (
    <>
      <label htmlFor="allUsers">
        <input type="checkbox" /> Select All Users
      </label>

      {users.map((user) => (
        <div key={user.id}>
          <input type="checkbox" />
          {user.name}
          {user.email}
        </div>
      ))}
    </>
  );
};

redux

来源：https://stackoverflow.com/questions/73554895/react-redux-change-local-state-or-change-redux-state

2条答案

按热度按时间

lmvvr0a81#

我认为还有第三种方法可以让你达到你所寻找的，并避免 * 玷污 * redux用户商店。
实际上，存储在redux中的用户充当服务器值的数据缓存。
如果在某个时候你需要将一个用户值发送回一个API，改变缓存会给那些对象引入额外的属性，这不是很清楚。基本上你会有一个服务器和客户端UI的混合问题。

我的建议如下：

1.不要更改redux存储在客户端上存储用户值的方式。
1.引入一个名为selectedUsers的客户端专用状态，它将包含一个数组或一组用户ID。
代码如下所示：
（未经测试，只是伪js代码）

import React from "react";
import { useSelector } from "react-redux";

const UserComponent = () => {
  const users = useSelector((state) => state.users["users"]);
  const [selectedUsers, setSelectedUsers] = useState([]);
  const allUsersSelected = selectedUsers.length === users.length

  const toggleAllSelected = () => 
    setSelectedUsers(val => val ? [] : users.map(u => u.id))

  const makeHandleToggleUser = id => ev => 
    setSelectedUsers(val => {
      // if val includes id, return array less id
      // otherwise return [...val, id]
    } 

  return (
    <>
      <label htmlFor="allUsers">
        <input type="checkbox" checked={allUsersSelected} onClick={toggleAllSelected} /> Select All Users
      </label>

      {users.map((user) => (
        <div key={user.id}>
          <input type="checkbox" onClick={makeHandleToggleUser(id)} checked={allUsersSelected || selectedUsers.includes(user.id)} />
          {user.name}
          {user.email}
        </div>
      ))}
    </>
  );
};