使用 redux 工具包 persist

什么是 redux 工具包 persist

redux 工具包 persist 是一个用于持久化存储 redux store 的工具包，它提供了一种简单的方法来将 redux store 中的数据保存到本地存储中，并在页面重新加载后恢复 store 中的数据。使用 persist，我们可以很容易地实现如记住用户登录状态、保存用户偏好设置等场景。

安装

要使用 redux 工具包 persist，在项目中先安装它。在命令行中输入以下命令：

npm install redux-persist --save

使用

使用 redux 工具包 persist 需要进行以下几个步骤：

1. 创建一个持久化配置对象；
2. 将 redux store 和持久化配置对象传递给 persistReducer 函数创建一个新的 reducer；
3. 创建一个 persistor 对象，并将其传递给 React 组件；
4. 在根组件中渲染一个包裹着其他组件的 PersistGate 组件。

下面是一个使用 redux 工具包 persist 的示例：

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // localStorage
import { PersistGate } from 'redux-persist/integration/react';

// 1. 创建持久化配置对象
const persistConfig = {
  key: 'root',
  storage,
};

// 2. 创建新的 reducer
const rootReducer = (state = {}, action) => {
  switch (action.type) {
    case 'SET_NAME':
      return { ...state, name: action.payload };
    default:
      return state;
  }
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);

const persistor = persistStore(store);

// 3. 在根组件中渲染 PersistGate 组件
function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <h1>Hello, World!</h1>
      </PersistGate>
    </Provider>
  );
}

在上面的示例代码中，我们首先创建了一个持久化配置对象，该对象包含一个键名 key 和一个用于存储数据的存储引擎 storage，这里我们使用的是浏览器的本地存储 localStorage。

然后我们创建了一个 redux store，并将其传递给 persistReducer 函数，该函数接受一个 redux reducer 和一个持久化配置对象作为参数，返回一个新的 reducer。在创建新的 reducer 后，我们创建了一个 persistor 对象。

最后，在根组件中我们在 Provider 组件和其他组件之间插入了一个 PersistGate 组件，该组件用于在 redux store 中恢复数据。这里我们将 persistor 对象作为 persistor 属性传递给 PersistGate 组件。

结论

redux 工具包 persist 提供了一种方便的方法来将 redux store 中的数据存储到本地存储中，并在页面重新加载后还原。使用它可以轻松实现如记住用户登录状态、保存用户偏好设置等功能。