背景
对于前端开发者来说，很多时候我们需要对应用状态进行持久化，以便实现状态在应用运行过程中的顺畅转换。其中，dva 是一款优秀的前端框架，然而 dva 的数据流方案只在内存中保存了状态，没有做持久化，因此需要开发者自己考虑数据状态的持久化实现。
在这里我们介绍一个方便易用的 npm 包 dva-model-persist，该包能够将 dva model 中的状态进行持久化，并且在 dva model 更新时自动更新持久化状态。下文将为大家详细介绍该包的使用方法。
安装
dva-model-persist 可以通过 npm 安装：
npm i dva-model-persist
使用
API 介绍
dva-model-persist 暴露了三个 API：
- createPersistedReducer
该 API 接受一个可持久化的角色和一个根 reducer，在角色变化时，它会将之前角色的状态读取出来并恢复。
-- -------------------- ---- -------
------ - ---------------------- - ---- --------------------
----- ---------- - ------- ------- -- -
------ ------------- -
---- -----------
------ - --------- --------- ------------------- --------------- --
--------
------ ------
-
--
----- ------------- - --------------
------ ------- ------------------------------------- ------------- persistStore
该 API 接受一个 Redux store 实例并且返回一个persistor对象，用于观察 store 并将其保存本地。在应用挂载之前调用这个函数并订阅 persitor 初始化状态。当 persitor 准备好之后，将显示一个回调函数。
import { createStore } from 'redux';
import { persistStore } from 'dva-model-persist';
const store = createStore(reducer);
const persistor = persistStore(store, null, () => {
console.log('rehydration complete');
});- purgeStoredState
该 API 可以清空本地存储的状态。
import { purgeStoredState } from 'dva-model-persist';
purgeStoredState();示例
我们以一个简单的 TodoList 应用来演示 dva-model-persist 的使用。首先我们需要安装 dva 以及 dva-model-persist：
npm i dva dva-model-persist
然后定义一个存储 TodoList 状态的 model：
-- -------------------- ---- -------
------ - ---------------------- - ---- --------------------
----- ---------- - ------ - - --------- -- -- ------- -- -
------ ------------- -
---- -----------
------ - --------- --------- ------------------- --------------- --
---- --------------
------ -
---------
--------- ------------------------- -- ---- --- -------------------
--
--------
------ ------
-
--
----- -------------- - ------
------ ------- -------------------------------------- ------------这里我们调用了 createPersistedReducerAPI，设置了一个名为 app 的角色，然后将应用的业务逻辑写在了 appReducer 中。同时，使用 ...state 的方式简化 state 更新，这是 es6 语法和 redux 库本身的特性。
接下来，我们将其与 dva 框架集成：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --- ---- ------ ------ - ------------ - ---- -------------------- ------ ---------- ---- --------------- ----- --- - ------ ---------------------- -- ----- ----- --- - -------------- -------- -- -- ---------- ----- ------------------- - -- -- - ------------- -- -------- ------ ---- --------- ---- --------- ----------- ------------------- -- ------------------------ ----- --------------------- -- ------
这里我们将 appReducer 传入 dva 的 model 方法中，然后调用 persistStoreAPI 创建一个 persistor。在初始化 App UI 之前，我们需要调用 persistor 的 initialize 方法来恢复 store 的旧状态。在回调 onRehydrateComplete 中，我们将完全初始化的 app 注入了 Router 组件，然后调用 app.start 方法启动 dva 应用。
最后，我们在 React 组件中调用 model 中定义的方法来更新 todoList 状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------
----- -------- ------- --------------- -
----- - - ----- -- -
------- - -- -- -
----- - ---- - - -----------
----- - -------- - - -----------
---------- ----- --------------- -------- - --- -------------- ---- - ---
--------------- ----- -- ---
--
---------- - ------ -- -
----- - -------- - - -----------
---------- ----- ------------------ -------- - --- ------- - ---
--
------ - -- -- -
----- - -------- - - -----------
----- - ---- - - -----------
------ -
-----
----
-------------------- -- -
--- --------------
-----------
------- ----------- -- --------------------------------------
-----
---
-----
-----
------ ------------ ----------- -- --------------- ----- -------------- --- --
------- -----------------------------------
------
------
--
--
-
------ ------- ------------- -- ---------------------到这里，我们已经可以更新 todoList 状态并且将其持久化到 localStorage 中了。同时，dva-model-persist 会在每次更新 model 后更新持久化状态。这样，我们就完成了 TodoList 应用的开发。
总结
dva-model-persist 是一个简单而实用的 npm 包，可以帮助前端开发者便捷的将应用状态保存到本地持久化存储并从本地读取。虽然我们的例子使用了 dva 作为状态管理库，但是 dva-model-persist 也可以与其他类 React 应用的状态管理库如 redux 集成。希望本文能够帮助读者高效的开发实现带有持久化状态的 React 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f78238a385564ab6957