如何在Redux Toolkit中修改状态属性实现Mark All全选功能

问题根源 #

现有代码无法实现全选的核心原因有两点：

• 已有的toggleComplete reducer 仅支持根据传入的单个商品ID修改对应项的选中状态，没有批量修改所有商品状态的处理逻辑
• ProductList组件调用状态更新方法时，传入的id、isComplete取自组件自身props，既没有关联全局商品列表的实际状态，也没有遍历所有商品执行修改，自然无法触发批量更新。

具体修改步骤 #

1. 更新productSlice.js，新增批量全选处理逻辑 #

在slice的reducers配置中新增toggleAll方法，专门处理全选/取消全选的批量状态更新，同时记得导出该action：

import { createSlice, nanoid } from '@reduxjs/toolkit';

const productSlice = createSlice({
  name: "product",
  initialState: [],
  reducers: {
    addProduct: (state, action) => {
      const productItem = {
        id: nanoid(),
        title: action.payload.title,
        isComplete: false,
      };
      state.push(productItem);
    },
    toggleComplete: (state, action) => {
      const idx = state.findIndex(
        (product) => product.id === action.payload.id
      );
      state[idx].isComplete = action.payload.isComplete;
    },
    // 新增全选切换reducer
    toggleAll: (state, action) => {
      const targetStatus = action.payload.isComplete;
      state.forEach(product => {
        product.isComplete = targetStatus;
      })
    }
  },
});

// 导出新增的toggleAll action
export const { addProduct, toggleComplete, toggleAll } = productSlice.actions;

export default productSlice.reducer;

2. 更新ProductList.js，调整全选交互逻辑 #

移除对props中无关的id、isComplete的依赖，全选状态直接从全局商品列表计算得出，点击时调用新增的toggleAll方法完成批量更新，同时同步复选框的选中状态避免UI和数据不一致：

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import ProductItem from "./ProductItem";
import { Form } from "react-bootstrap";

import "./ProductList.css";
// 导入新增的toggleAll action
import { toggleAll } from "../redux/productSlice";

function ProductList() {
  const productItem = useSelector((state) => state.product);
  const dispatch = useDispatch();

  // 计算当前是否所有商品都已选中，作为全选框的状态依据
  const isAllSelected = productItem.length > 0 && productItem.every(product => product.isComplete);

  function handleMarkAll() {
    dispatch(
      toggleAll({
        isComplete: !isAllSelected,
      })
    );
  }

  return (
    <ul className="productUl">
      {/* 绑定checked属性同步全选状态 */}
      <Form.Check label="Mark All" checked={isAllSelected} onChange={handleMarkAll} />

      {productItem.map((product) => (
        <ProductItem
          key={product.id}
          id={product.id}
          title={product.title}
          isComplete={product.isComplete}
        />
      ))}
    </ul>
  );
}

export default ProductList;

注：列表渲染时的key建议使用商品唯一id而非遍历索引，避免列表增删时出现渲染异常。

修改完成后点击Mark All按钮，就会把所有商品的isComplete属性统一切换为目标状态：如果当前存在未选中商品就全部设为选中，如果已经全选就全部设为未选中。

内容的提问来源于stack exchange，提问作者Anathex