在现代 Web 应用程序中，数据是至关重要的。在许多情况下，数据离线可用性是一个非常有用的特性，因为它允许用户在没有互联网连接的情况下浏览其应用程序。Redux 是一个非常流行的状态管理库，很多人用它来管理他们的应用程序的状态。本文将讨论如何在 Redux 中实现脱机缓存以提高应用程序的离线可用性。
缓存数据
考虑到我们希望在应用程序进行缓存之前先检查缓存中是否有数据，如果有，我们会从缓存中获取它并使用它，否则我们会从服务器上获取数据。我们可以使用 Redux 中间件解决这个问题。
-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
------ ----- ---- --------------
------ - ------------ - ---- ---------------
------ -------- - ------------ - ---- -------------
-- -------- -- --------- --- ----- ---- - ------
----- -------------- - ------- -- -
--- -
------ ----------------------
- ----- ----- -
-----------------
------ -----
-
--
-- -------- -- ----------- --- ----- ---- - ------
----- ---------------- - ----------------- -- -
--- -
------ ----------------------------
- ----- ----- -
-----------------
------ -----
-
--
-- ---- --- ----- -- ------------ ----- ---- --- ----- -------
----- ----------------------- - ------- -- -
--- -
----- --------------- - ----------------------
----------------------------- -----------------
- ----- ----- -
-----------------
-
--
-- ---- --- ----- ---- ------------ -- -- ------- --------- --- --- ------- -----
----- ------------------------- - -- -- -
--- -
----- --------------- - ------------------------------
-- ---------------- --- ----- -
------ -------------
-
------ ----------------------------------
- ----- ----- -
-----------------
------ -------------
-
--
----- ------ - ---------------
----- ---------- - ------- --------
-- ------ --- ----- ----- ----- --- ------------------------- -------- -- ---- --- ------- -----
----- ----- - -------------------- ---------------------------- --------------------------------
-- ---- --- ----- -- ------------ ----- ---- --- ----- -------
------------------ -- -
------------------------------------------
---在上面的代码中，我们首先定义了两个函数，一个用于将状态序列化为 JSON 字符串，另一个用于将 JSON 字符串反序列化为状态对象。在 saveStateToLocalStorage 函数中，我们使用 localStorage.setItem() 将序列化后的状态保存到 localStorage 中。在 loadStateFromLocalStorage 函数中，我们使用 localStorage.getItem() 从本地存储中获取存储的状态，然后使用状态，如果不存在，则返回初始状态。最后，我们创建 Redux store，并在 applyMiddleware() 函数中将中间件数组传递给 Redux Store，包括 thunk 中间件从而支持异步流程， logger 中间件用于输出 Redux 日志。
缓存 Action
接下来，我们需要修改我们的应用程序以便我们能够使用缓存中的数据。在 Redux 中，我们可以定义一个新的 action 类型，该类型将首先从缓存中获取数据，如果缓存中不存在数据，则从服务器上获取数据，并将数据附加到该 action 中。
-- -------------------- ---- -------
------ ----- ------------------ - ---------------------
------ ----- ---------------- - -------------------
------ ----- --------------------- - ------------------------
-- ------ ------- -- ---- ----
------ ----- -------- - -- -- -
------ ---------- --------- -- -
----- ---------- - ----------------
-- ----------- -- ----------------- --- -- -
-- -------- --- ------ ----
----------
----- ----------------------
-------- -----------
---
- ---- -
-- ----- --- ---- ---- ------
---------------------------------
----------- -- -----------
------------ -- -
-- -------- --- ----
----------
----- -------------------
-------- -----
---
--
------------ -- -
-- -------- --- -----
----------
----- -----------------
-------- ----
---
---
-
--
--在上面的代码中，我们定义了一个名为 loadData 的 action creator，当应用程序需要数据时，它会被调用。如果我们在本地存储中找到数据，则我们将数据从 Redux store 中检索出 getState() 函数中，并且在 dispatch() 函数中使用新的 FETCH_DATA_FROM_CACHE action 类型将数据输出到 store 中。否则，我们将从服务器上加载数据，然后使用 FETCH_DATA_SUCCESS 和 FETCH_DATA_ERROR action 类型分别传递成功和错误的结果。 在 componentDidMount 生命周期方法中，我们将调用 loadData action creator 以便我们可以在加载组件时加入加载数据逻辑。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------- - ---- ------------
----- --- - -- -- -
----- ---- - ------------------- -- ------------
----- -------- - --------------
------------ -- -
---------------------
-- ------------
-- ------- -
------ ------------ ----------
-
------ -
-----
---------------- -- -
---- -------------------------------
---
------
--
--
------ ------- ----在上面的代码中，我们首先使用 useSelector() hook 从 Redux store 中选择 data 状态然后使用 useDispatch() hook 从 Redux store 中获取 dispatch 方法。我们使用 useEffect() hook 以在组件加载时调用 loadData() 方法。在 if (!data) 语句中，我们检查数据是否已经加载，如果没有，则返回默认的“加载中”信息，否则我们就显示加载数据。
实现缓存失效
我们现在已经实现了离线缓存，但我们的缓存不会过期。缓存过期是非常重要的，因为我们不希望从本地缓存中获取过时的数据。我们可以使用 redux-persist 库来达到自动过期的效果。
首先，我们需要安装 redux-persist 库。
npm install redux-persist
接下来，我们需要对代码进行一些修改，以便将 redux-persist 集成到我们的应用程序中。我们需要在 createStore 中指定一个新的 reducer，该 reducer 将负责将我们的应用程序状态保存到本地存储中。
-- -------------------- ---- ------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- ----- ------------- - - ---- ------- -------- -- ----- ---------------- - ----------------------------- --------- ------ ----- ----- - ------------ ----------------- ---------------------- -------- -- ------ ----- --------- - --------------------
在上面的代码中，我们首先导入必要的 redux-persist 库的函数。然后我们定义一个配置对象，设置 key 属性和 storage 属性。这些选项将告诉 Redux 如何将数据保存到存储中。我们使用 persistReducer 函数创建一个新的 reducer，该 reducer 将根据配置对象将状态保存到本地存储中。最后，我们导出 store 和 persistor，store 用于从组件中读取数据，persistor 用于将我们的 Redux store 状态保存到本地存储中。
总结
在本文中，我们讨论了如何在 Redux 中实现离线缓存以提高应用程序的可用性。我们首先讨论了如何保存和恢复应用程序的状态，以及如何为 Redux 应用程序添加缓存 action。然后，我们将 redux-persist 库集成到我们的应用程序中，实现了自动过期的效果。通过这些技术，我们的应用程序在离线时可以提供更好的用户体验，同时还可以减少对服务器的依赖。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469e120968c7c53b09aa22a