使用 Redux-persist 实现浏览器刷新状态保持-JavaScript中文网-JavaScript教程资源分享门户

在 Web 应用程序开发中，随着用户操作的不断进行，页面的状态也会发生不同程度的变化，这些状态数据可能包括用户输入的表单数据、已经加载的列表内容、用户偏好设置等等。但是，当用户刷新页面或关闭浏览器后，这些状态数据会全部被清空，用户需要重新操作从而使页面恢复到之前的状态。这对用户体验不友好，所以在许多场景下需要保持页面状态以提高用户的使用体验。

那么在 Web 应用中，如何实现浏览器刷新状态保持呢？一种可行的方案是使用 Redux-persist。Redux-persist 是一个用于在 Redux 应用中持久化存储状态的库，它将状态数据存储在浏览器的本地存储中，可以在刷新页面后自动恢复应用的状态，从而避免了数据丢失的问题。

安装和基本使用

在使用 Redux-persist 之前，你需要先安装它。可以通过 npm 或 yarn 进行安装：

npm install redux-persist --save
// 或者
yarn add redux-persist

安装完成后，你需要在应用中引入 Redux-persist。

// www.javascriptcn.com code example
// 引入 createStore 和 applyMiddleware 方法、自定义 Redux 中间件
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
// 引入 persistReducer 和 persistStore 方法
import { persistReducer, persistStore } from 'redux-persist';
// 引入 localStorage
import storage from 'redux-persist/lib/storage';

// 定义 Redux reducer
const rootReducer(state = {}, action) {
   // TODO: 处理 Redux Action
}

// 创建 Redux store
const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['user'] // 只保留 user reducer 数据
}

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(
  persistedReducer,
  applyMiddleware(thunk)
);

// 创建 Redux persist store
const persistor = persistStore(store);

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

在上面代码中：

你需要先定义应用的 Redux reducer；
然后使用 persistReducer 方法将 redux reducer 转换成支持本地存储的版本，同时指定持久化配置；
使用 createStore 方法创建 Redux store，并将之前创建的 persistedReducer 作为参数传入；
使用 persistStore 方法创建 Redux persist store，并将之前创建的 Redux store 作为参数传入；
最后使用 Provider 和 PersistGate 提供的组件将应用所需的 store 和 persist store 注入到组件层级中。

至此，你已经成功实现了 Redux-persist 的基本使用。在应用中，你可以编写正常的 Redux Action 和 Redux Reducer，并将它们保存到本地存储中。

高级用法

在实际应用中，Redux-persist 提供了很多高级选项和配置，可以满足复杂场景下的需求，例如：

加密存储

如果你需要在存储状态时加密所有敏感数据，那么可以使用 redux-persist-transform-encrypt。

// www.javascriptcn.com code example
import storage from 'redux-persist/lib/storage';
import { encryptTransform } from 'redux-persist-transform-encrypt';

const encryptor = encryptTransform({
  secretKey: 'my-secret-key',
  onError: function(error) {
    // Handle the error.
  }
});

const persistConfig = {
  key: 'root',
  storage,
  transforms: [encryptor] // 添加 encryptor 到 transforms 中
};

在上面的代码，我们使用 encryptTransform 将加密器添加到 transforms 数组中，从而对存储的内容进行加密操作。

自定义存储方式

默认情况下，Redux-persist 将状态存储在浏览器的本地存储中。但是，在某些情况下，您可能希望使用其他存储机制，例如 IndexedDB 或 WebSQL。在这种情况下，你需要自定义存储方式。可以使用 redux-persist-seamless-immutable 转换器，将普通 JS 对象转换为 ImmutableJS 对象，并使用 ImmutableJS 库对其进行存储和恢复。

// www.javascriptcn.com code example
import { Map } from 'immutable';
import storage from 'redux-persist/lib/storage';
import seamlessImmutable from 'redux-persist-seamless-immutable';

const persistConfig = {
  key: 'root',
  storage,
  transforms: [seamlessImmutable()]
};

在上面的配置中，我们在 transforms 数组中添加了一个 seamlessImmutable 转换器，将普通 JS 对象转换为 ImmutableJS 对象。

迁移旧版存储

在应用中更新 Redux-persist 版本时，可能会导致存储格式的变化。在这种情况下，你需要升级存储内容以匹配新版本。

// www.javascriptcn.com code example
import storage from 'redux-persist/lib/storage';
import { persistReducer } from 'redux-persist';

const persistConfigV1 = {
  key: 'root',
  storage: storage,
  whitelist: ['user'],
  version: 1 // 定义旧版存储的版本号
};

const persistConfigV2 = {
  key: 'root',
  storage: storage,
  whitelist: ['user', 'preferences'], // 新的存储增加了 preferences reducer
  version: 2 // 定义升级后的版本号
}

const rootReducer = combineReducers({
  user: userReducer, // 保留 user reducer
  preferences: preferenceReducer // 增加 preferences reducer
});

// 创建 Redux store
const persistedReducer = persistReducer(persistConfigV2, rootReducer);

const store = createStore(
  persistedReducer,
  applyMiddleware(thunk)
);

// 创建 Redux persist store
const persistor = persistStore(store, null, () => {
  const oldPersistor = persistStore(store, persistConfigV1, () => {
    oldPersistor.pause(); // 暂停旧版存储中间件
    oldPersistor.purge(); // 清除旧版存储
    oldPersistor.persist(); // 重新开始新版存储中间件
  });
});

在上面的代码中，我们创建了两个不同的 persistConfig：

persistConfigV1 是旧版的存储配置；
persistConfigV2 是升级后的存储配置，它增加了 preferences reducer 的存储；
在初始化 store 的时候，我们创建了一个新版的 persistStore，并同时创建了一个旧版的 persistStore。当新版 persistStore 初始化完成后，我们会在回调函数中启动旧版的 persistStore；
在获得旧版的 persistStore 后，我们使用 pause 方法暂停其存储中间件，使用 purge 方法清除旧版存储内容，并使用 persist 方法重新启动保存新版存储的中间件。

结束语

本文展示了如何使用 Redux-persist 实现浏览器刷新状态保持。我们介绍了 Redux-persist 的基本和高级用法，并提供了示例代码以供参考。在实际应用中，应该根据具体需求和场景选择适合的存储策略和配置选项。如果您正在开发 Web 应用程序并希望实现浏览器刷新状态保持，那么 Redux-persist 是一个不错的选择。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d09696e46428fe9edbb9b3

使用 Redux-persist 实现浏览器刷新状态保持

安装和基本使用

高级用法

加密存储

自定义存储方式

迁移旧版存储

结束语

接着读