介绍
redux-persist-model 是一个 Redux 的持久化存储解决方案，它可以将 Redux 中的数据存储到本地存储中，以便在应用程序重新加载时，可以将之前存储的数据还原到 Redux 中。
安装
使用 npm 安装：
npm install --save redux-persist-model
使用方法
1. 创建 reducer
要使用 redux-persist-model 来持久化存储 Redux 中的数据，您需要先创建一个 Redux reducer。
-- -------------------- ---- -------
----- ------------ - -
------ ---
----------------- ----------
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- -----------
------ ----------------- ------ -
------ -
---------------
-
----- ------------
---------- -----
-
-
---
---- --------------
------ ----------------- ------ -
------ ---------------------- ------ -- -
-- ------ --- ------------- -
------ ----------------- ----- -
---------- ---------------
---
-
------ -----
--
---
---- ------------------------
------ ----------------- ------ -
----------------- -------------
---
--------
------ ------
-
-2. 创建 model
接下来，您需要创建一个 model 对象，它定义了要持久化存储的 Redux store 的某些部分。
const model = {
reducer: todoApp, // 定义 reducer
version: 1, // 定义版本，更新 version 将自动清除旧数据
key: 'todoApp', // 定义存储在本地存储中的 key
blacklist: ['visibilityFilter'] // 黑名单过滤掉不需要存储的 state
};API
1. persistStore(store, [options], [callback])
persistStore() 方法是 redux-persist 提供的方法，它返回一个 Promise，用于初始化 store，并将持久化的 state 添加到 store 中。
import { createStore } from 'redux';
import { persistStore } from 'redux-persist-model';
const store = createStore(todoApp);
persistStore(store); 2. persistReducer(config)
要使用 redux-persist-model，您需要将现有的 reducer 处理成一个持久化的 reducer。与 redux-persist 不同的是，persistReducer 的参数是一个配置对象，而不是一个键和一个配置对象。
-- -------------------- ---- -------
------ - -------------- - ---- ----------------------
----- ---------------- - ---------------
-
------- ------- -- ------- ----- --
--
-------
--
----- ----- - ------------------------------
--------------------3. purgeStore(store)
purgeStore() 方法用于将 Redux store 中的所有持久化数据清除。
import { createStore } from 'redux';
import { persistStore, purgeStore } from 'redux-persist-model';
const store = createStore(todoApp);
persistStore(store);
purgeStore(store); // 清除 store 中的所有数据。4. setStore(store)
setStore() 方法用于设置一个全局变量，以便您可以在任何地方使用它。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------- - ---- ---------------------- ----- ----- - --------------------- -------------------- ---------------- -- ---------- ------ -----------------
示例
下面是一个完整的示例，演示了如何使用 redux-persist-model。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - --------------- ------------ - ---- ----------------------
------ ------- ---- ----------------------------------
------ - -------- - ---- ----------------------
-- -- -------
----- ------------ - -
------ ---
----------------- ----------
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- -----------
------ ----------------- ------ -
------ -
---------------
-
----- ------------
---------- -----
-
-
---
---- --------------
------ ----------------- ------ -
------ ---------------------- ------ -- -
-- ------ --- ------------- -
------ ----------------- ----- -
---------- ---------------
---
-
------ -----
--
---
---- ------------------------
------ ----------------- ------ -
----------------- -------------
---
--------
------ ------
-
-
-- -- -----
----- ----- - -
-------- --------
-------- --
---- ----------
--------
---------- --------------------
--
-- -- -------
----- ---------------- - ---------------
-
------- -------
--
-------
--
-- -- -----
----- ----- - ------------------------------
-- --- -----
--------------------
-- ------
----------------
-- --------- ----- --- -----
----- --------------- - -----------------
-- - --- ----- ---------------
-------- ----- -
------ -
--------- --------------
------ --
-----------
--
-结语
redux-persist-model 是一个简单易用的持久化数据方案，在 Redux 应用程序中，它可以帮助您轻松地存储和还原应用程序的 state。我们希望这篇文章能够帮助您快速了解 redux-persist-model 的使用方法，如果您有任何疑问或反馈，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c6181e8991b448d9e5d