在前端开发中，Redux 作为一款可预测的状态管理库，在大规模应用开发中得到广泛的应用。而为了保证在刷新页面或者浏览器关闭后，用户之前存储在 Redux 中的状态仍然存在，开发者需要使用 Redux-persist 存储状态，让状态即使在刷新或者关闭浏览器之后也可以被保留。
Redux-persist 提供了多种本地存储方式，其中很重要的一种就是利用浏览器提供的 localStorage 功能进行存储。然而，由于 localStorage 存储有大小限制，而且有些情况下 localStorage 还可能被清除，因此在使用 localStorage 进行 Redux-persist 持久化存储时，可能会遇到一些问题。
针对这些问题，有开发者基于 Redux-persist 和 Redux-storage 框架新增了一个 npm 包：Redux-localstorage-fix-localstorage-fork。这个包在 Redux-persist 的基础上，为使用 localStorage 进行持久化存储时提供了额外的容错能力，而且支持对 localStorage 存储大小的控制。本篇文章将带大家学习如何使用 Redux-localstorage-fix-localstorage-fork。
安装与配置
首先，我们需要利用 npm 安装 Redux-localstorage-fix-localstorage-fork。在终端中，执行以下命令：
npm install --save redux-localstorage-fix-localstorage-fork
接着，在 Redux 项目中，我们需要配置 localReducer 和 localMiddleware。首先，为了使用缓存，我们需要设置一个 localReducer：
-- -------------------- ---- ------- ------ ----------------- ---- -------- ------ -------------- ---- ------------------------------------------- ----- ----------- - ----------------- -- ---- -------- ---- --------------- ---------------------------- -- --- --- ---- --- ------------ -- ----- ----- ------- ------------ ---
然后，我们在 Redux createStore 函数中加入一个 middleware，这个 middleware 叫做 localMiddleware:
-- -------------------- ---- -------
------ --------------------- ---- ---------------------------
------ ------------- ---------------- ---- --------
------ ----------------- ---- -------------------------------------------
------ ----------- ---- ----------------
----- -------- - --------------------
----------------
-- --- --- ---- ------ -- --- ---------- ----------- -- --- ----
------------------ ------- ----
-
--
----- ----- - ------------------------ ----------这样，配置工作就完成了。默认情况下，Redux-localstorage-fix-localstorage-fork 会以对象形式存储数据，但是在某些情况下，可能数据会有重复。因此，考虑到 localStorage 容量的限制，我们可以选择对存储的数据结构进行压缩。当然，压缩 store 中的数据结构需要某个序列化库的支持，因此需要我们在 store 的配置中传入这个序列化库。
import {LocalStorageSerializer} from 'redux-localstorage-fix-localstorage-fork';
const serializer = new LocalStorageSerializer(/* options */);
const store = createStore(rootReducer, enhancer);配置选项
在 Redux-localstorage-fix-localstorage-fork 中，我们可以配置的选项包括：
key: 使用哪个键来存储 state，必须是一个非空字符串。
serialize: 函数将数据序列化为字符串的函数。默认情况下使用 JSON.stringify。
deserialize: 将数据从字符串反序列化为数据的函数。默认情况下使用 JSON.parse。
merge: 将传入的状态合并（和前一个状态）而不是完全替换。如果需要打开此选项，请使用示例代码进行验证，确保其能够与您的代码协同工作。
reviver: 函数可以修改反序列化值（植树造林的意思），默认为否则 （v =>v）。
slice: plice 是如果序列化数据的功能。默认为从0 到外加 1。
determinePersist:（生命坚持）一个函数，该函数的参数是当前状态的归档版本，并返回一个布尔值，以确定是否应将此版本存储在 localStorage 中。默认为（v => true），以确保将所有版本都存储在 localStorage 中。
以上这些配置选项，大家可以根据自己实际的情况进行选择配置。下面是三个常用的配置示例。
-- -------------------- ---- -------
-- -- ----- --- --------- -------- ------------ -
----- ------------------- - -
---- ---------
--
-- -- -- ------- -------------
------ ------- ---- ---------------
----- --------------------- - -
---------- ----- -- ----------------------
------------ ----- -- ---------------------
--
-- -- ------------------------
----- ---------------------- - -
----------------- - -- ---------- - ----------- - -- - -- - ----
--Redux-localstorage-fix-localstorage-fork 示例
让我们通过一个示例来使用 Redux-localstorage-fix-localstorage-fork。
-- -------------------- ---- -------
------ ------------- ---------------- ---- --------
------ --------------------- ---- ---------------------------
------ ----------------- ------------- ---- -------------------------------------------
----- ------- - -
-- ----- --- ------------ - ------- -
---- ----------
-- ------------- -------------------------- -
---------- ------------------------------------------
------------ -------------------------------------------
--
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- ----------
------ ---------- ---- ------------
---- -----------
------ ---------- ----- -------------
--------
------ ------
-
--
----- ---------- - ---------------------------
----- -------- - ----------------------------------------------------
----- ------------ - -
-- - ------------ ------------
------- --------------
--------- --
------------- ----
--
--
----- ----- - ------------
------------
-------------
--------
--
------------------ -- -
------------------------------
---
--------------------- ---------- ---- -----
--------------------- ----------- ----- --------上面的代码会将 年龄 和 名称 存储进 Redux 的持久化存储中（本例中为 localStorage 的 myState 键）。同时也可看到，我们的 state 会被储存在 localStorage 的 _local 字段下。这样，即使浏览器关闭或者刷新后，我们的 state 仍然可以被保留下来，实现了浏览器本地的状态保留。
总结
Redux-localstorage-fix-localstorage-fork 是 Redux-persist 在 localStorage 存储情况下的一个优秀解决方案，可以帮助前端开发者更好地存储 Redux 状态。通过本文的介绍，我们可以学习如何使用 Redux-localstorage-fix-localstorage-fork，同时也可以按照自己的情况进行配置。最后，希望大家在实际的开发中，能够更加灵活、高效地运用 Redux-localstorage-fix-localstorage-fork。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8ab4