在上一篇文章中，我们介绍了如何使用 Redux 管理 React 项目中的 session localStorage。本篇文章将为大家继续深入讲解如何实现 session localStorage 的持久化存储以及如何使用 Thunk middleware 实现异步操作。
持久化存储
在前一篇文章中，我们使用 sessionStorage 来存储 session 数据。然而，sessionStorage 仅在当前浏览器窗口关闭之前有效，并且即使浏览器崩溃或重启，sessionStorage 也会被清除。如果希望我们的数据能够得到持久化的存储，我们需要使用 localStorage。
在 Redux 中使用 localStorage 可以使用 redux-persist 库来实现。redux-persist 可以将 Redux store 中的状态持久化到 localStorage、sessionStorage、内存和其他任何能够实现 "Storage "接口的存储介质。在这里，我们以 localStorage 为例。
首先，我们需要安装 redux-persist 和 redux-persist-exclude-filter 两个库：
npm install --save redux-persist redux-persist-exclude-filter
redux-persist-exclude-filter 可以选择性地黑名单/白名单状态的某些键来持久化存储。
接下来，在创建 store 的时候，我们需要将 reducer 和 persistReducer 两个函数组合起来：
-- -------------------- ---- ------- ------ - -------------- - ---- ---------------- ------ ------- ---- ---------------------------- ----- ------------- - - ---- ------- -------- ---------- ------------ -- ----- ---------------- - ----------------------------- -------------
在上面的代码中，我们创建了一个名为 persistConfig 的配置对象，并将其传递给了 persistReducer 函数。persistConfig 对象中有以下属性：
- key：用于 localStorage 存储的键的名称。
- storage：指定要使用的存储对象（例如，localStorage、sessionStorage）。
- whitelist：一个列表，它所包括的 reducer 状态将从 store 中持久化，其它状态将被忽略。
现在，我们已经成功地将 Redux store 中的状态持久化到本地存储中了。
Thunk middleware
我们之前所编写的 Redux action 都是同步的。在某些情况下，我们需要执行异步 action，例如读取 API 数据、异步转换数据等等。这时，我们需要使用 Redux 中间件，最常用的 Redux 中间件之一是 Thunk。
Thunk 已经成为了 Redux 官方提供的一个中间件，用于处理异步操作。Thunk 中间件可以让 action 创建函数先不返回一个 action 对象，而是返回一个函数。这个函数接收 dispatch 方法作为参数，然后异步执行后再 dispatch 最终的 action 对象。
下面是一个简单的 Thunk 中间件示例：
function fetchPosts() {
return (dispatch) => {
dispatch(requestPosts());
return fetch('/api/posts')
.then((response) => response.json())
.then((json) => dispatch(receivePosts(json)));
};
}在上面的代码中，fetchPosts 函数返回了一个函数，该函数接收 dispatch 方法作为其参数，然后异步获取 API 数据，在得到数据后使用 dispatch 方法分发一个 action 对象。
在 ActionCreator 中间件代码示例中，我们可以调用 HttpClinet Api 完成注销session操作，如果注销成功则更新 Redux store 中的 session 状态，并将更新的状态持久化存储到 localStorage 中。
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ ---------- ---- -----------------------
------ - --------- - ---- -----------
------ - --------- ------------- ------------------ - ---- ----------
------ ----- ------- - --- ------------
-----
----------
--------
------------------
- -- ----- ---------- -- -
--- -
----- --------------------------
----------
----- ---------
---
- ----- ------- -
----------
----- ---------
---
-
--
------ ----- ------------ - --- ------------------ -- --
----- ---------
---
我们也可以在主页中编写一个页面展示用户登录信息和一个注销按钮，当用户点击注销按钮时，异步触发 signOut 管理员异步 dispatch action 根据 httpClinet Api 完成操作。
结论
在这篇文章中，我们更深入地学习了如何使用 redux-persist 库将 Redux store 中的状态持久化到 localStorage 中，以及如何在 Redux 中使用 Thunk 中间件处理异步操作。这些技术可以帮助我们更加灵活和可靠地管理 React 项目中的 session localStorage 数据。希望这篇文章对于初学者对于 Redux 数据处理以及 Thunk异步数据流程的深入认知有所帮助。
示例代码可以在 https://github.com/DemoMacro/react-redux-session-example/tree/redux-persist-refactor参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6714c5e1ad1e889fe215be63