Redux 中的持久化完全指南-JavaScript中文网-JavaScript教程资源分享门户

Redux 是 React 生态中最流行的应用状态管理工具之一，但在某些情况下，应用需要在重启后恢复先前的状态。这是通过持久化 Redux store 实现的，本文将深入探讨 Redux 中的持久化。

前置知识

在继续阅读之前，请确保您已经熟悉 Redux 中的基础知识。

什么是持久化？

持久化是指在系统关闭或断电之后，数据仍然可以被恢复。在另一个层面上，持久化是将数据从 volatile（易失性）状态转换为 non-volatile（非易失性）状态的过程。

在前端应用程序中，持久化通常意味着在浏览器的存储介质中存储数据，这样即使用户关闭了浏览器或计算机，也可以恢复应用程序状态。

Redux 中的持久化

Redux 中的持久化主要是将 Redux store 中的状态保存在持久性存储介质中。Redux 中的状态是纯 JavaScript 对象，因此可以方便地序列化和反序列化，例如 JSON 格式。

Redux 中有很多库可以用来处理持久化，下面我们会逐一介绍它们。

1. redux-persist

redux-persist 是 Redux 的一个持久化库，它使用了 Redux Middleware 的概念，将 Redux 状态持久化到磁盘中。它提供了多种存储引擎，包括 localStorage、sessionStorage、IndexedDB、AsyncStorage 等。

安装：

npm install redux-persist

使用：

// javascriptcn.com 代码示例
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web

const persistConfig = {
  key: 'root',
  storage,
};

const rootReducer = combineReducers({
  // your reducers
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);
const persistor = persistStore(store);

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

2. redux-persist-immutable

redux-persist-immutable 是基于 redux-persist 的一个变体，其主要的目标是处理 Immutable 数据。

安装：

npm i redux-persist-immutable

使用：

// javascriptcn.com 代码示例
import { persistStore, persistReducer } from "redux-persist-immutable";
import immutableTransform from "redux-persist-transform-immutable";
import storage from "redux-persist/lib/storage";

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

const rootReducer = combineReducers({
  // your reducers
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);
const persistor = persistStore(store);

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

3. redux-storage

redux-storage 是一个独立的 Redux 持久化库，它是基于 redux-persist 的，但提供了更多的存储引擎，例如 sessionStorage 等。而且它还提供了一个简单的存储引擎 API，让你轻松地实现自己的存储引擎。

安装：

npm install redux-storage

使用：

// javascriptcn.com 代码示例
import { createStore } from 'redux'
import { createReduxStorage } from 'redux-storage'
import createEngine from 'redux-storage-engine-localstorage'
import { applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'

const reducer = (state = { value: 0 }, action) => {
  switch (action.type) {
    case 'INC':
      return { value: state.value + action.payload }
    default:
      return state
  }
}

const engine = createEngine('my-save-key')

const middleware = [createReduxStorage(engine)]

const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(...middleware))
)

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

4. redux-persist-expire

redux-persist-expire 也是基于 redux-persist 的一个变体，其目的是过期清除存储的 key/value，避免浪费存储空间。

安装：

npm install redux-persist-expire

使用：

// javascriptcn.com 代码示例
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
import { persistReducerExpire } from 'redux-persist-expire';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['example', 'example2'], // 必需在这里设置以便过期清除
};

const fooReducer = (state = { bar: 'baz' }, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

const expireOneHour = persistReducerExpire({
  expireKey: 'expire one hour',
  defaultState: null,
  expiredState: null,
  expireSeconds: 3600,
});

const rootReducer = persistReducer(
  persistConfig,
  combineReducers({ foo: fooReducer, expired: expireOneHour })
);

const store = createStore(rootReducer, applyMiddleware(thunk));
const persistor = persistStore(store);

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

5. localForage

localForage 是一个快速、简单的库，用于在 WebSQL、IndexedDB 和 localStorage API 上提供异步的存储方法。

安装：

npm install localforage

使用：

// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import persistState from 'redux-localstorage'
import localForage from 'localforage'

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(sagaMiddleware),
    persistState(null, {
      storage: localForage, // 指定 storage 引擎为 localForage
      key: 'myapp',
    })
  )
)

总结

无论您使用哪种库来处理 Redux 持久化，都要确保当前使用的存储引擎适合您的特定需要。专注于提供正确的配置，以便在持久化方面获得最佳体验。希望这篇文章对您有帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653ddfa27d4982a6eb785c87