我正在使用Ionic 7,React 18,Redux-Toolkit和Redux-Persists。我想将我的一个状态(cart)持久化到本地存储。我已经设置了我的cartSlice如下
interface CartState {
[key: string]: OrderItem[];
}
const initialState: CartState = {};
const cartSlice = createSlice({
name: "cart",
initialState,
reducers: {
...
},
clearCart: (state) => {
...
},
},
});
export const {
addToCart,
clearCart,
} = cartSlice.actions;
export default cartSlice.reducer;
字符串
并设置我的根持久化还原器如下
const rootPersistConfig = {
key: 'root',
storage: storage,
blacklist: ['auth'],
stateReconciler: autoMergeLevel2
};
const authPersistConfig = {
key: 'auth',
storage: sessionStorage,
}
const rootReducer = combineReducers({
auth: persistReducer(authPersistConfig, authReducer),
cart: cartReducer,
})
const persistedReducer = persistReducer(rootPersistConfig, rootReducer);
export default persistedReducer;
型
我将它加载到我的存储中,如下所示
export const store = configureStore({
reducer: persistedReducer, // rootReducer,
devTools: import.meta.env.VITE_NODE_ENV !== "production",
});
型
我不清楚的是如何将我的初始状态设置为本地存储,假设那里已经有东西了。每次我加载我的应用程序时,我的初始状态都会重置为“{}",这是因为我在切片中设置了它,但我不知道如何告诉我的状态,如果状态已经存在,初始状态可以从本地存储加载。
2条答案
按热度按时间vdzxcuhz1#
确保您遵循所有设置/配置步骤。
字符串
x1c 0d1x的数据
bvhaajcl2#
您可以在
rootPersistConfig
配置对象中使用stateReconciler
选项,以确保从本地存储(如果可用)填充cart的初始状态。stateReconciler
函数负责将本地存储中的持久化状态与reducer的默认初始状态相结合。下面是如何使用
stateReconciler
函数的示例:字符串
在
rootPersistConfig
配置中还包括以下函数:型
购物车的初始状态将从本地存储(如果此设置可用)填充,以确保购物车在页面重新加载或应用重新启动之间保持持久性。