React+Redux 项目实践：使用 Redux-persist 实现本地存储-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，本地存储是一个很常见的需求，使用本地存储可以提高用户体验，减轻服务器压力，同时还可以让用户在断网情况下继续访问应用。在 React+Redux 项目中，我们可以使用 Redux-persist 库来实现本地存储的功能。

什么是 Redux-persist

Redux-persist 是一个官方推荐的 Redux 持久化存储解决方案。它使我们可以将 Redux 的数据存储在本地存储中，并在应用重启后将其恢复。Redux-persist 中使用了许多缓存策略和存储引擎来管理数据的存储和恢复。

安装和配置

在使用 Redux-persist 之前，我们需要先安装并配置它。我们可以通过 Npm 或 Yarn 来安装它：

npm install redux-persist --save

或

yarn add redux-persist

安装完成后，我们需要在 Redux 中配置 Redux-persist：

// javascriptcn.com 代码示例
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// 定义 reducer
const rootReducer = combineReducers({
  // ...其他 reducer
});

// 定义 persist 配置
const persistConfig = {
  key: 'root',
  storage,
}

// 创建 persist reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

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

// 创建 persistor，用于持久化 store
const persistor = persistStore(store);

这里我们通过 persistReducer 函数将 rootReducer 转化成一个可以持久化存储的 reducer，并使用 persistStore 函数创建一个 persistor 用于持久化 store。

基本用法

有了 Redux-persist 的配置，我们就可以在 Redux 中使用本地存储了。在 Redux 中，我们可以通过 autoRehydrate middleware 自动将本地存储中的数据恢复到 Redux 中。我们需要调用 persistor 的 purge 方法清除本地存储中的数据，以便我们进行测试。

// javascriptcn.com 代码示例
import { PersistGate } from 'redux-persist/integration/react'

const App = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <MyApp />
    </PersistGate>
  </Provider>
);

我们使用 PersistGate 包裹应用的根组件，PersistGate 会检查本地存储中的数据是否存在，如果存在，它会在 store 中恢复它们。在 PersistGate 组件中，我们可以使用 loading 属性来指定在加载过程中要显示的内容。

高级用法

除了基本用法之外，Redux-persist 还提供了许多高级用法。下面我们来介绍一些常见的高级用法。

Whitelist 和 Blacklist

略过。

禁用并清除本地存储

有时候，我们需要停止使用 Redux-persist 并清除本地存储中的数据。我们可以通过 persistor 的 purge 方法来清除本地存储中的数据：

persistor.purge()

当我们调用 purge 方法后，本地存储中的数据将被清除。此时，我们也不应该对 store 进行任何操作。如果我们希望停止使用 Redux-persist，我们可以将 PersistGate 组件从应用根组件中移除。

示例代码

下面我们来看一个完整的 React+Redux 项目示例代码，该代码使用 Redux-persist 实现了本地存储。

// javascriptcn.com 代码示例
import React from 'react';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { PersistGate } from 'redux-persist/integration/react';

// 定义 reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

// 定义 persist 配置
const persistConfig = {
  key: 'root',
  storage,
};

// 创建 persist reducer
const persistedReducer = persistReducer(persistConfig, counterReducer);

// 创建 store
const store = createStore(
  persistedReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

// 创建 persistor，用于持久化 store
const persistor = persistStore(store);

const App = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <div>
        <h1>Counter</h1>
        <p>Count: {store.getState()}</p>
        <button onClick={() => store.dispatch({ type: 'INCREMENT' })}>
          Increment
        </button>
      </div>
    </PersistGate>
  </Provider>
);

export default App;

总结

Redux-persist 是一个非常有用的 Redux 库，它可以方便我们实现本地存储的功能，提高用户体验，并减轻后端服务器的压力。在使用 Redux-persist 时，我们需要注意一些细节，比如 whitelist 和 blacklist 的正确配置。如果我们使用得当，Redux-persist 可以成为我们开发中的一条重要的利器。

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