Redux 状态持久化之 redux-persist 使用示例_react刷新页面后redux中的状态会变化吗

同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。

下面使用 redux-persist 插件的示例代码:

1. 首先需要安装 redux-persist 依赖:

npm install redux-persist
1

2. 在 Redux store 的配置文件中 (比如 store.js),引入 redux-persist 相关的模块和配置:

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用 localStorage 作为存储介质

import rootReducer from './reducers'; // 你的 Redux 根Reducer

// 配置 redux-persist 的持久化选项
const persistConfig = {
  key: 'root', // 存储在 localStorage 中的键名
  storage, // 使用 localStorage 作为存储介质
  whitelist: ['yourReducerKey'] // 指定需要持久化的 reducer 键名
};

// 创建一个持久化的 reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// 创建 Redux store
const store = createStore(persistedReducer);

// 创建持久化存储
const persistor = persistStore(store);

export { store, persistor };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3. 在 React 应用的入口文件中 (比如 index.js),使用 PersistGate 组件包裹根组件,以便在 Redux store 重新加载时恢复持久化的状态:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

import { store, persistor } from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={<div>Loading...</div>} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在上面的示例代码中:

• 我们使用 persistReducer 函数包装了 Redux 的根 reducer,并配置了持久化选项,包括存储介质和需要持久化的 reducer 键名。
• 然后使用 persistStore 函数创建了一个持久化存储实例 persistor。
• 在 React 应用的入口文件中,我们使用 PersistGate 组件包裹了根组件,并传递了 persistor 实例。当 Redux store 重新加载时,PersistGate 会先从存储介质中恢复持久化的状态,然后再渲染根组件。

通过这种方式,你就可以在 Redux 应用中使用 redux-persist 实现状态的持久化存储和恢复了。你可以根据具体需求自定义持久化选项,比如使用不同的存储介质、指定不同的持久化键名等。