Redux 是一个状态管理库，可以帮助我们在应用中管理数据。但是，Redux 的缺点是它的状态是临时的，当我们刷新页面或关闭应用时，状态会丢失。为了在我们的应用中持久化状态，我们可以使用 redux-localstorage-slicer 这个 npm 包。
安装
使用 npm 安装：
npm install redux-localstorage-slicer --save
使用
redux-localstorage-slicer 提供了一个 localStorageSlicer 函数，它可以在 Redux 的 createStore 函数中使用。localStorageSlicer 接受一个 options 对象，它有以下属性：
key：字符串，用于存储数据的 key，默认值为'redux'。debounce：整数，用于延迟保存到 localStorage 中的时间（以毫秒为单位），默认值为500。slice：函数，用于选择要存储在 localStorage 中的状态的部分。默认情况下，localStorageSlicer将保存整个状态。
在下面的示例中，我们将创建一个带有一个计数器的 Redux store。我们希望该计数器状态在每次更改时都能够自动保存到 localStorage 中。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------------ - ---- ----------------------------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ------------
--------
--------------------
------ ----- -- -- ------ ----------- --
--
--
------------------ -- -
------------------------------
---
---------------- ----- ----------- --- -- - ------ - -
---------------- ----- ----------- --- -- - ------ - -在这里，我们使用了 localStorageSlicer 函数，将计数器状态的一部分存储在 localStorage 的 redux key 下。当我们调用 store.dispatch 时，计数器状态将更新并保存到 localStorage 中。我们还将 store.subscribe 传递给函数，以便在状态更改时打印新状态。
结论
redux-localstorage-slicer 可以帮助我们将 Redux 状态持久化到 localStorage 中。使用它还可以避免直接将整个状态存储到本地，从而提高了效率。希望这篇文章对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8ab9