Redux Toolkit如何正确修改isInBasket状态同步购物车按钮效果

对应逻辑可本地复现调试，核心需求是点击「加入购物车」按钮时，正确同步商品的isInBasket状态，实现和「加入收藏」一致的按钮激活效果。
当前示例商品数据结构：

{
  id: 1,
  title: 'BMW',
  isFavorite: false,
  isInBasket: false
}

项目现有两个Redux切片：

• 购物车切片（basketSlice）：负责购物车商品增删、清空逻辑
• 商品切片（productsSlice）：负责全量商品列表状态，目前仅实现收藏状态切换
  商品卡片组件上两个按钮分别对应加购、收藏操作，当前问题是加购后仅购物车切片内的商品副本isInBasket为true，商品列表源数据里的对应字段始终为false，导致按钮激活状态不生效。

首先明确Redux的核心设计原则：

• 单一数据源：全量应用状态存在唯一store中，不同切片按领域拆分状态，单个reducer仅能修改自身负责的状态切片，不能直接访问/修改其他切片的状态
• 状态只读：唯一修改状态的方式是dispatch action
• 纯函数修改：reducer必须是纯函数

现有状态拆分思路是合理的，不需要跨切片修改状态。isInBasket属于商品自身的属性，应该归productsSlice维护，购物车切片只需要存已加购的商品ID列表即可，不需要存完整商品副本——这也是出现状态不同步的根本原因：同一份商品数据在两个切片里存了两份副本，修改其中一份不会同步另一份，属于典型的状态冗余反模式。

1. 修正basketSlice的状态设计 #

购物车不需要存完整商品信息，只需要存已加购的商品ID、总数量这类购物车专属状态即可，移除冗余的商品副本存储：

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

const basketSlice = createSlice({
  name: 'basket',
  initialState: {
    productIds: [], // 仅存加购商品ID，不存完整商品信息
    totalCount: 0,
  },
  reducers: {
    addProductToBasket: (state, action) => {
      const productId = action.payload;
      if (!state.productIds.includes(productId)) {
        state.productIds.push(productId);
        state.totalCount += 1;
      }
    },
    removeProductFromBasket: (state, action) => {
      const productId = action.payload;
      state.productIds = state.productIds.filter(id => id !== productId);
      state.totalCount = state.productIds.length;
    },
    clearBasket: (state) => {
      state.productIds = [];
      state.totalCount = 0;
    }
  }
});

export const { addProductToBasket, removeProductFromBasket, clearBasket } = basketSlice.actions;
export default basketSlice.reducer;

购物车页面需要展示完整商品信息时，不需要在basket切片存冗余数据，直接编写selector从商品列表匹配即可：

export const selectBasketProducts = (state) => {
  return state.basket.productIds
    .map(id => state.products.list.find(p => p.id === id))
    .filter(Boolean);
}

2. 在productsSlice新增加购状态切换逻辑 #

和收藏逻辑保持一致，商品自身的isInBasket属性由商品切片自己维护：

import { createSlice } from '@reduxjs/toolkit';
import { products } from '../data';

const productSlice = createSlice({
  name: 'products',
  initialState: {
    list: products,
  },
  reducers: {
    toggleFavoriteProduct: (state, action) => {
      const product = state.list.find(p => p.id === action.payload);
      if (product) product.isFavorite = !product.isFavorite;
    },
    // 新增加购状态切换action
    toggleProductInBasket: (state, action) => {
      const product = state.list.find(p => p.id === action.payload);
      if (product) product.isInBasket = !product.isInBasket;
    }
  }
});

export const { toggleFavoriteProduct, toggleProductInBasket } = productSlice.actions;
export default productSlice.reducer;

3. 修正组件内的加购逻辑 #

点击加购按钮时，同时触发两个action：一个切换商品自身的加购标记，一个把商品ID加入/移出购物车列表：

import React from 'react';
import { useDispatch } from 'react-redux';
import { addProductToBasket, removeProductFromBasket } from '../features/basketSlice';
import { toggleFavoriteProduct, toggleProductInBasket } from '../features/productsSlice';

export default function ProductItem({ product }) {
  const dispatch = useDispatch();

  const handleBasketClick = (e) => {
    e.stopPropagation();
    // 切换商品自身的加购标记
    dispatch(toggleProductInBasket(product.id));
    // 根据当前状态决定是加购还是移除
    if (product.isInBasket) {
      dispatch(removeProductFromBasket(product.id));
    } else {
      dispatch(addProductToBasket(product.id));
    }
  };

  const handleFavoriteClick = (e) => {
    e.stopPropagation();
    dispatch(toggleFavoriteProduct(product.id));
  };

  return (
    <div className="products-item">
      <h4>{product.title}</h4>
      <button
        className={`btn ${product.isInBasket ? 'active' : ''}`}
        onClick={handleBasketClick}
      >
        {product.isInBasket ? <>🛒</> : <>🛍</>}
      </button>
      <button
        className={`btn ${product.isFavorite ? 'active' : ''}`}
        onClick={handleFavoriteClick}
      >
        {product.isFavorite ? <>❤️</> : <>💟</>}
      </button>
    </div>
  );
}

• 原removeProductFromBasket里写的state.products.isInBasket = !state.products.isInBasket是无效逻辑，state.products是数组，不存在isInBasket属性
• 原clearBasket里state.isEmpty = !state.isEmpty逻辑错误，清空购物车后必然是空状态，直接赋值true即可
• 原加购逻辑没有做重复判断，多次点击会重复往购物车push同一个商品

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