什么是redux-cube-with-persist
redux-cube-with-persist是一个用于React应用程序的npm包，它基于Redux和Redux-persist库。它提供了一个简单的方法来利用Redux-persist的本地存储以保存Redux store状态，并恢复它们到Redux store中。redux-cube-with-persist支持各种不同的应用场景，从简单的数据存储到全局应用状态管理。它很容易使用，因此建议React开发者使用它来提高他们的应用程序的效率和可靠性。
如何安装redux-cube-with-persist
redux-cube-with-persist可从npm上获取并安装，可以在终端开启以下命令来安装：
npm install redux-cube-with-persist --save
如何使用redux-cube-with-persist
应用场景
无论是单页面还是多页面应用程序，如果你希望你的Redux store状态能存储到本地，并在应用下一次打开时自动恢复，而不需要你重新加载数据，那么redux-cube-with-persist就是你需要的。
开始使用
首先，在你的应用中安装redux-cube-with-persist。
接下来，在你应用的根组件中，导入redux-cube-with-persist暴露出来的多个函数并使用它们，以实现你需要的应用场景：
-- -------------------- ---- ------- ------ - ------------- -------------- - ---- --------------- ------ ------- ---- --------------------------- -- -------- -- ------------ --- --- --- ------------ --- ------------ ------ --------- ---- ------------ ------ -------------------- ---- ------------------------- ----- ------------- - - ---- ------- -------- - ----- ----------- - ------- ------- -- - -- --- - ----- ---------------- - ----------------------------- ------------ ----- ----- - --------------------------------------- -------------------------------------------------- ------ ----- --------- - -------------------
在以上示例代码中，我们首先导入了redux-persist和redux-cube库，并且创建了一个带有redux-persist的Redux store和ReduxCubeWithPersist。
使用redux-cube-with-persist
redux-cube-with-persist作为ReduxCube库的扩展，你可以直接使用ReduxCub的所有功能，并在需要的地方使用ReduxCubeWithPersist的API扩展功能。
使用ReduxCubeWithPersist API可以读取和写入本地存储中的数据，来获取应用程序的状态。例如，我们可以使用以下示例代码来向本地存储写入数据：
ReduxCubeWithPersist.setData('myData', { foo: 'bar' })
const myData = ReduxCubeWithPersist.getData('myData')
console.log(myData) // logs: { foo: 'bar' }在这个示例代码中，我们将名为myData的JSON数据写入了本地存储，并在之后使用了ReduxCubeWithPersist的getData函数读取这个数据，将结果输出到控制台（{foo：‘bar’}）。
ReduxCubeWithPersist API参考
ReduxCubeWithPersist API的完整知道你可以在https://redux-cube-with-persist.npmjs.com中找到。
示例代码
下面是一个使用redux-cube-with-persist的完整示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------- -------------- - ---- ---------------
------ ------- ---- ---------------------------
------ - -------- - ---- -------------
------ --------- ---- ------------
------ -------------------- ---- -------------------------
----- ------------- - -
---- -------
-------- --------
-
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- ------------
------ - --------- -------- ------------- - - -
--------
------ -----
-
-
----- ---------------- - ----------------------------- ------------
----- ----- - ---------------------------------------
-------------------------------------------------- ------
----- --------- - -------------------
-------------------------------------- - ---- ----- --
----- --- - -- -- -
----- ------- - -- -- -
----- ---- - --------------------------------------
-----------------
-
------ -
--------- --------------
-----
----------- -- ----- ---- ---- ------------
------- ----------- -- ---------------- ----- ----------- ----
--------- -------
---------
------- --------------------- ---- ---- ----- ----------------
------
-----------
-
-
------ ------- ---在这个示例代码中，我们首先导入了redux-persist和redux-cube-with-persist库，然后创建了一个带有redux-persist的Redux store。
接下来，我们使用redux-cube-with-persist的initPersist函数扩展store的功能，以便能够向本地存储中写入和读取数据。
在示例代码中，我们向本地存储写入了一个名为myData的JSON数据，并使用在组件中渲染的getData函数读出了这个数据。
我们还创建了一个简单的React组件，其中有两个按钮，一个触发INCREMENT Redux操作并另一个触发本地存储数据的渲染。
这是完整的指导和示例，能够帮助您开始使用redux-cube-with-persist来保存和恢复您的Redux store状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8ad4