如何在Redux-Persist中为不同用户创建独立购物车存储？

针对你需要为每个用户单独存储购物车到localStorage的需求，提供两种可行方案：

方案一：每个用户独立存储条目（推荐） #

通过动态生成Redux-Persist的存储键，实现不同用户购物车数据的隔离，切换用户时自动加载对应数据。

1. 改造Store创建逻辑 #

将固定的store初始化改为函数，根据当前用户ID生成对应存储键：

// store.ts
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistReducer, persistStore } from "redux-persist";
import storage from "redux-persist/lib/storage";
import basketSlice from './slices/basket/basket.slice';
import categoriesSlice from "./slices/category.slice";
import ordersSlice from './slices/orders.slice';
import userSlice from "./slices/user/user.slice";

const rootReducer = combineReducers({
  basket: basketSlice,
  orders: ordersSlice,
  categories: categoriesSlice,
  user: userSlice
});

// 接收userId参数，动态生成persist配置
export const createStoreWithPersist = (userId?: string) => {
  const persistConfig = {
    key: userId ? `basket/${userId}` : 'basket', // 未登录用默认键
    storage,
    whitelist: ['basket'], // 仅持久化购物车
  };

  const persistedReducer = persistReducer(persistConfig, rootReducer);

  const store = configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) => {
      return getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: [FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE],
        },
      });
    },
  });

  const persistor = persistStore(store);
  return { store, persistor };
};

export type RootType = ReturnType<typeof rootReducer>;

2. 动态切换Store与Persistor #

在App.tsx中监听用户状态变化，自动重新创建对应用户的Store：

// App.tsx
import { Toaster } from '@/components/ui/toaster';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { useSelector } from 'react-redux';
import { useMemo } from 'react';
import Paths from './components/routes/Routes';
import { createStoreWithPersist, RootType } from './store/store';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
});

function App() {
  const user = useSelector((state: RootType) => state.user.user);
  const userId = user?.id;

  // 当userId变化时，重新生成Store和Persistor
  const { store, persistor } = useMemo(() => createStoreWithPersist(userId), [userId]);

  return (
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <Paths />
          <Toaster />
        </PersistGate>
        <ReactQueryDevtools initialIsOpen={false} />
      </Provider>
    </QueryClientProvider>
  );
}

export default App;

3. 登出时清理购物车（可选） #

在用户登出时，触发Redux-Persist的PURGE动作清空当前用户的购物车存储：

// user.slice.ts
import { PURGE } from "redux-persist";
// ...
.addCase(logout.fulfilled, (state, { dispatch }) => {
  state.isLoading = false;
  const userId = state.user?.id;
  state.user = null;
  // 清空当前用户的购物车存储
  if (userId) {
    dispatch({ type: PURGE, key: `basket/${userId}`, result: () => null });
  }
})

方案二：单条目存储并过滤 #

如果动态创建Store过于复杂，可以将所有用户的购物车存储在同一个localStorage条目中，通过userId在客户端过滤数据。

1. 改造购物车Slice结构 #

修改Slice状态为以userId为键的对象，存储所有用户的购物车数据：

// basketSlice.ts
import { IBasketItem } from "@/interfaces/basket.interface";
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

// 全局购物车状态：键为userId，值为对应用户的购物车
interface IGlobalBasketState {
  [userId: string]: { products: IBasketItem[] | null };
}

const initialState: IGlobalBasketState = {};
 
const basketSlice = createSlice({
  name: 'basket',
  initialState,
  reducers: {
    addProductToBasket(state, action: PayloadAction<{ userId: string; item: IBasketItem }>) {
      const { userId, item } = action.payload;
      // 初始化用户购物车
      if (!state[userId]) state[userId] = { products: [] };
      // 添加商品
      state[userId].products?.push(item);
    },
    deleteProductFromBasket(state, action: PayloadAction<{ userId: string; productId: number }>) {
      const { userId, productId } = action.payload;
      if (!state[userId]?.products) return;
      // 删除商品
      state[userId].products = state[userId].products.filter(p => p.id !== productId);
    },
  }
});

export const basketActions = basketSlice.actions;
export default basketSlice.reducer;

2. 更新Persist配置 #

修改store.ts中的persistConfig，使用统一存储键：

// store.ts
const persistConfig = {
  key: 'baskets', // 统一存储键
  storage,
  whitelist: ['basket'],
};

3. 组件中获取当前用户购物车 #

通过useSelector过滤出当前用户的购物车数据：

// 业务组件中
import { useSelector } from 'react-redux';
import { RootType } from '@/store/store';

const user = useSelector((state: RootType) => state.user.user);
// 获取当前用户的购物车，无数据时返回初始状态
const userBasket = useSelector((state: RootType) => state.basket[user?.id] || { products: null });

4. 调用购物车Action时传入userId #

所有购物车操作需要携带当前用户ID：

dispatch(basketActions.addProductToBasket({
  userId: user.id,
  item: { id: productId, quantity: 1 }
}));

方案对比 #

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