我正在使用React typescript和Node JS开发电子商务应用程序。
我使用@reduxjs/toolkit
来管理产品和购物车的状态。
对于购物车,我使用redux-persist
创建了一个持久化的reducer来保存购物车,即使在页面刷新之后也是如此。
产品减速器为普通减速器asyncThunks
。
当我使用combineReducers
设置存储时,两个状态(product
和cart
)都没有加载。
这是推车减速器
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);
我到底做错了什么
谢谢:)
1条答案
按热度按时间cygmwpex1#
在
persistConfig
中使用whitelist
或blacklist
,并将persistReducer
应用于根减速器,它应该可以工作