Redux 持久化存储 - 如何使用 redux-persist 持久化 Redux 数据

代码解释如下：

1. 导入所需的库和模块：

   • `configureStore`：用于创建 Redux store 的函数，来自 `@reduxjs/toolkit` 库。
   • `persistReducer`：用于将指定的模块持久化存储的函数，来自 `redux-persist` 库。
   • `storage`：用于存储持久化数据的存储引擎，来自 `redux-persist/lib/storage` 模块。
   • `thunk`：用于处理异步操作的 Redux 中间件。

2. 导入创建的 reducer：

   • `counter`：从 `./modules/user` 模块中导入的 reducer。

3. 指定需要持久化存储的模块：

   • `persistedModules`：一个包含需要持久化存储的模块名称的数组。

4. 创建一个新的 reducer，只持久化存储指定的模块：

   • `rootReducer`：一个函数，接收当前的 state 和 action 作为参数，在 action 类型为指定的持久化模块时，调用 `persistedReducer` 来处理 state 更新。否则，返回原始的 state。

5. 创建 `persistedReducer`，只持久化存储指定的模块：

   • 使用 `persistReducer` 函数创建一个新的 reducer，该 reducer 将只持久化存储指定的模块。
   • `persistReducer` 函数接收一个配置对象和一个 reducer 函数作为参数，配置对象包含以下属性：
     • `key`：指定持久化存储的键名。
     • `storage`：指定持久化存储的引擎。
     • `whitelist`：指定需要持久化存储的模块名称。

6. 配置 store：

   • 使用 `configureStore` 函数创建 Redux store，传入一个配置对象作为参数。
   • 配置对象包含以下属性：
     • `reducer`：指定根 reducer 为 `persistedReducer`，即只持久化存储指定的模块。
     • `devTools`：指定是否启用 Redux 开发者工具。
     • `middleware`：指定中间件，这里只使用了 `thunk` 中间件来处理异步操作。

7. 导出 store 作为默认导出。