react @reduxjs/toolkit将persist reducer与普通reducer结合

os8fio9y  于 2023-03-30  发布在  React
关注(0)|答案(1)|浏览(162)

我正在使用React typescript和Node JS开发电子商务应用程序。
我使用@reduxjs/toolkit来管理产品和购物车的状态。
对于购物车,我使用redux-persist创建了一个持久化的reducer来保存购物车,即使在页面刷新之后也是如此。
产品减速器为普通减速器asyncThunks
当我使用combineReducers设置存储时,两个状态(productcart)都没有加载。
这是推车减速器

import { createSlice } from "@reduxjs/toolkit";
import { PayloadAction } from "@reduxjs/toolkit/dist/createAction";
import { cart, product } from "../models";
import { toasterSuccess, toasterWarning } from "../shared/toaster";

export interface CartState {
  cartItems: cart[];
}

const initialState = {
  cartItems: [],
};

const cartSlice = createSlice({
  name: "cart",
  initialState: initialState,
  reducers: {
    addToCart: (state: CartState, action: PayloadAction<product>) => {
      /*adding to cart logic*/
    },
    removeFromCart: (state: CartState, action: PayloadAction<cart>) => {
      /*removingfrom cart logic*/
    },
    updateCartItemQuantity: (state: CartState, action: PayloadAction<cart>) => {
      /*updating cart item logic*/
    },
  },
});

export const cartReducer = cartSlice.reducer;
export const { addToCart, removeFromCart, updateCartItemQuantity } =
  cartSlice.actions;

这是产品减速器

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { filter, product } from "../models";
import { GetProducts } from "../shared/apis/productApi";

export interface ProductState {
  products: product[];
  productsScroll: product[];
  brands: string[];
  categories: string[];
  hasMore: boolean;
}

const initialState = {
  products: [],
  productsScroll: [],
  brands: [],
  categories: [],
  hasMore: true,
} as ProductState;

export const fetchProducts = createAsyncThunk(
  "products/list",
  async (filter: filter) => {
    const response = await GetProducts(filter);
    return response.Body;
  }
);

const productSlice = createSlice({
  name: "products",
  initialState: initialState,
  reducers: {
    emptyScroll: (state: ProductState) => {
      state.productsScroll = [];
    },
  },
  extraReducers: (builder) => {
    builder.addCase(fetchProducts.fulfilled, (state: ProductState, action) => {
      state.products = action.payload!.products;
    });
  },
});

export const productReducer = productSlice.reducer;
export const { emptyScroll } = productSlice.actions;

最后是商店

import { configureStore } from "@reduxjs/toolkit";
import { cartReducer } from "../slices/cartSlice";
import { productReducer } from "./productSlice";
import { combineReducers } from "@reduxjs/toolkit";
import storage from "redux-persist/lib/storage";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";

const persistConfig = {
  key: "root",
  storage,
};
export const persistedReducer = persistReducer(persistConfig, cartReducer);
const rootReducer=combineReducers({
    cart:persistReducer,
    product:productReducer
})
export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});
export const persistor = persistStore(store);

我到底做错了什么
谢谢:)

cygmwpex

cygmwpex1#

persistConfig中使用whitelistblacklist,并将persistReducer应用于根减速器,它应该可以工作

const persistConfig = {
 key: "root",
 storage,
 whitelist:["cart"]
};
const rootReducer = persistReducer(persistConfig, combineReducers({
   cart: cartReducer,
   product: productReducer
}));

相关问题