简介
在前端开发中，Redux 是最常用的状态管理库之一。Redux 提供了一个全局单一状态树，通过派发 Action 来更新状态树中的值，然后通过 React 组件的 connect 高阶函数将状态挂载到组件属性上，方便了跨组件的数据传输。但是 Redux 在持久化存储方案上没有给出明确的解决方案，这就意味着当用户关闭了浏览器或者浏览器崩溃重启后，Redux 状态会被清空。为了解决这个问题，我们可以使用第三方的持久化存储中间件，redux-raven-persist-middleware 是其中之一。
redux-raven-persist-middleware 是基于 Redux 而开发的持久化存储中间件，可以让 Redux 状态持久化到本地浏览器的 sessionStorage 或者 localStorage 中，并且可以通过 Raven.js 将持久化数据上报到 Sentry 日志服务，帮助我们更好地监控网站的运行情况。
安装
使用 npm 安装：
npm install redux-raven-persist-middleware
版本选择
redux-raven-persist-middleware 目前已经更新到 2.0.0 版本，要使用旧版本，可以看这里 redux-raven-persist-middleware。
使用
redux-raven-persist-middleware 的使用非常简单，只需要在创建 Redux Store 的时候配置相关参数即可。以下是一个示例代码：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- ------ - -- ------ ---- ------------------ ------ --------------------- ---- --------------------------------- ------ ----------- ---- ------------- -- -- ------ ----- ------------- - - ---- ------- -------- -- -- -- --- -------- ------ ------------- ---- ----- ----- ------------ --------------------- --- -- -- -- -------- --- ----- --------------- - ------------------------------ -- -- -- ----- ----- ----- ---------------- - ----------------------------- ------------- ----- ----- - ------------ ----------------- -------------------------------- -- ----- --------- - -------------------- -- -- -- ----- - --------- ------ ------- - ------ --------- --
在上述代码中，我们进行了以下操作：
- 定义了 redux-persist 的配置选项，其中
key是 Redux 执行上下文中用于选择恢复子状态的 key，storage是存储机制，可以是 sessionStorage 或者 localStorage。 - 初始化 Sentry。
- 创建 redux-raven-persist-middleware 传入 Sentry 对象，Sentry 对象可以为空，如果为空，则 redux-raven-persist-middleware 不会上报数据到 Sentry，只会将数据持久化到本地存储中。
- 创建 Redux Store，其中使用了 redux-raven-persist-middleware，并且将其添加到 Redux Store 的中间件中。
- 导出 store 和 persistor 对象，这样在组件内就可以使用了。
示例
在下面的示例中，我们将创建一个简单的 Redux 应用程序，并将状态保存到本地存储中。还将演示如何从 Sentry 后台记录错误日志。
准备
在开始之前，您需要安装以下三个包：
npm install redux react-redux redux-persist
演示
让我们在 index.js 文件中创建 Redux 应用程序。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- ----------------------------------
------ - ------ --------- - ---- ---------- -- -- ----- - ---------
------ --- ---- -------------------
----------------
--------- --------------
------------ -------------- ----------------------
---- --
--------------
------------
-------------------------------
--store.js 中分别定义了 store 和 persistor。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- ------ - -- ------ ---- ------------------ ------ --------------------- ---- --------------------------------- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- -- -- --- -------- ------------- ---- ----- ----- ------------ --------------------- --- ----- --------------- - ------------------------------ ----- ---------------- - ----------------------------- ------------- ------ ----- ----- - ------------ ----------------- -------------------------------- -- ------ ----- --------- - --------------------
reducers.js 中定义了一些处理数据的函数。
-- -------------------- ---- -------
------ - -- ----------- ---- -------------------------
------ - ------------ - ---- --------------------
----- ------------ - -
-------- --
--
----- ---------------- - ------- -- -
----- ------------ - -
-------- ------------- - --
--
------ ------------------- --------------
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------------------------
------ ------------------------
--------
------ ------
-
--
------ ------- --------actions.js 里定义了一个 操作类型 增加 计数器 的函数。
import * as actionTypes from './actionTypes';
export const incrementCounter = () => {
return {
type: actionTypes.INCREMENT_COUNTER,
};
};App.js 中则是首页，其中 connect 函数将少部分的 Redux Store 中的状态映射到 App 组件的属性中。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - -- ------- ---- ---------------------------
----- --- ------- --------- -
-------- -
------ -
-----
-----------------------------------------
------- ---------------------------------------------------
------
--
-
-
----- --------------- - ------- -- -
------ -
-------- --------------
--
--
----- ------------------ - ---------- -- -
------ -
------------------- -- -- -------------------------------------
--
--
------ ------- ------------------------ -------------------------当你运行代码并在计数器上单击几次后，本地存储中将持久化存储 Redux 的状态树数据。可以将您的浏览器关闭并重新打开，然后 Redux 状态将得到恢复。
此外，如果您在设置 Sentry 时，可以看到所有错误日志以及持久化的数据在 Raven 事件下，这将有助于您更好地监控和调试您的应用程序。
总结
在本文中，我们探讨了如何在 Redux 应用程序中持久化存储状态。我们使用 redux-raven-persist-middleware 包来实现此功能，并稍微了解了使用 Sentry 来记录任何错误的记录。
希望文中内容能对大家有所帮助，可以尝试着将 redux-raven-persist-middleware 应用到自己的项目中，为 Redux 应用程序持久化存储状态打下坚实的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005591981e8991b448d68b3