要将redux存储保存到localStorage中,应将persistedState放在创建存储中的preloadedState
位置。
在使用redux时,可以通过createStore
函数创建一个存储对象。该函数接受三个参数:reducer
、preloadedState
和enhancer
。其中,preloadedState
参数用于指定存储的初始状态。
要将redux存储保存到localStorage中,可以使用localStorage
API将存储状态序列化为字符串,并在页面加载时从localStorage中获取该字符串并反序列化为存储状态。
以下是一个示例代码:
import { createStore } from 'redux';
// 定义reducer函数
function reducer(state = {}, action) {
// 处理action并返回新的状态
return state;
}
// 从localStorage中获取存储状态字符串
const persistedStateString = localStorage.getItem('reduxState');
// 反序列化存储状态字符串为存储状态对象
const persistedState = persistedStateString ? JSON.parse(persistedStateString) : {};
// 创建存储对象,并将persistedState作为preloadedState传入
const store = createStore(reducer, persistedState);
// 监听存储变化,将存储状态保存到localStorage中
store.subscribe(() => {
const state = store.getState();
localStorage.setItem('reduxState', JSON.stringify(state));
});
在上述代码中,我们首先从localStorage中获取存储状态字符串,并通过JSON.parse
方法将其反序列化为存储状态对象。然后,我们将该对象作为preloadedState
传入createStore
函数,创建了一个存储对象store
。
接下来,我们通过store.subscribe
方法监听存储变化。每当存储发生变化时,我们将存储状态通过JSON.stringify
方法序列化为字符串,并使用localStorage.setItem
方法将其保存到localStorage中。
这样,每次页面加载时,我们都可以从localStorage中获取之前保存的存储状态,并将其作为初始状态传入createStore
函数,实现redux存储的持久化。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云