Redux Toolkit如何从一个slice复制数据到另一个slice？

完全可以实现你想要的需求——不用在组件里先提取products数据再传递给action，直接通过Thunk在Redux内部完成数据的读取和转移。

核心逻辑 #

Redux Thunk允许你编写返回函数而非普通对象的action creator，这个函数可以访问getState方法获取当前全局Redux state，从而直接读取products slice中的数据，再生成对应的cart更新逻辑。

具体实现步骤 #

1. 在cart slice中创建Thunk Action
   利用Redux Toolkit的createAsyncThunk定义添加商品到购物车的逻辑：

   import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
   
   // 定义添加商品到购物车的thunk
   export const addProductToCart = createAsyncThunk(
     'cart/addProductToCart',
     async (productId, { getState }) => {
       // 从全局state中获取products slice的数据
       const { products } = getState();
       // 根据ID找到目标商品
       const targetProduct = products.find(item => item.id === productId);
       
       if (!targetProduct) return; // 商品不存在则终止
       
       // 返回需要添加到购物车的核心数据
       return {
         id: targetProduct.id,
         quantity: targetProduct.currentQuantity // 替换为你实际存储数量的字段名
       };
     }
   );
   
   // 配置cart slice的reducer
   const cartSlice = createSlice({
     name: 'cart',
     initialState: [], // 假设购物车是存储商品ID和数量的数组
     reducers: {},
     extraReducers: (builder) => {
       builder.addCase(addProductToCart.fulfilled, (state, action) => {
         // 处理购物车更新逻辑：存在则累加数量，不存在则新增
         const existingItem = state.find(item => item.id === action.payload.id);
         if (existingItem) {
           existingItem.quantity += action.payload.quantity;
         } else {
           state.push(action.payload);
         }
       });
     }
   });
   
   export const cartReducer = cartSlice.reducer;
   

2. 组件中直接分发Thunk
   组件里只需要传递商品ID即可，不需要额外读取products数据：

   import { useDispatch } from 'react-redux';
   import { addProductToCart } from './cartSlice';
   
   function ProductCard({ productId }) {
     const dispatch = useDispatch();
   
     const handleAddToCart = () => {
       dispatch(addProductToCart(productId));
     };
   
     return (
       <div>
         {/* 商品展示内容 */}
         <button onClick={handleAddToCart}>加入购物车</button>
       </div>
     );
   }
   

补充说明 #

• 如果商品数量是组件内的临时状态（比如用户在输入框中输入的数量），需要把数量作为参数传递给thunk；但如果数量是已经存在于products slice中的持久化数据，就完全可以通过getState直接读取。
• 这种方式把数据转移的逻辑集中在Redux层，让组件更轻量化，也符合Redux"单一数据源"的设计思想。

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