前言
在前端应用开发中，状态管理和数据流管理是非常重要的，而React+Redux一直是前端开发中比较优秀的技术方案。但是，Redux在使用上存在一定的限制，如难以支持异步操作，使用繁琐等，这就需要更加高效的替代方案。
dva-immer是一个基于dva的State Management库，它能够简化React应用中的状态管理，同时通过immer帮我们简化数据更新流程。
什么是dva-immer
dva-immer是dva的一个插件，它充分利用了immer的特性，简化了Redux中dispatch的操作，使得我们在使用Redux的时候能够处理更加复杂的状态树，而且还能减少大量的Reducers。同时，dva-immer的API和Redux是兼容的，你可以使用Redux所有的Middleware和DevTool等扩展。
如何使用dva-immer
安装dva-immer
使用npm安装dva-immer：
npm install dva-immer --save
创建应用
在使用dva-immer之前，请确保您已经安装了latest版本的dva
-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- ------
------ ------------- ---- --------------
------ ----------- ---- ------------
------ --- ---- -------------------
-- ----
----- --- - ------
-- ----
-------------------------
-- -------------
-----------------------
-- -------
-----------
---------- --------
------ -
---- --
--
--------- -
--------------- -
--------- -- --
--
--------------- -
--------- -- --
--
--
---
-- ----
------------- -- ---- ----
-------------------使用Model和Effect
Model和Effect和dva一样，只是状态树的更新使用了immer的语法
-- -------------------- ---- -------
------ ------- -
---------- --------
------ ---
--------- -
---------- ------- -
----- - -------- ---- - - -------
-----------------
--
------------- ------- -
----- - -------- ------ - - -------
----- ---- - -------------- -- ---- --- --------
-------------- - ----------------
--
--
-------- -
-------------- - ----- --- -- -
----- ----- - ----- ---------------------
----- ----- ----- --------- -------- ----- ---
--
--
--Store的使用
使用dva-immer后的store和Redux的很像，你可以使用Redux所有的api，但是Reducer更新状态时要使用immer的语法
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
------ -------------------- ---- -------------
------ - -------------- ------- - ---- ---------------------
------ ----------- ---- -------------
-- ---------
----- -------------- - -----------------------
-- -------------
----- ---------------- - ------ ------ --- -------- -- -------------------------------------------
- --------------------------------------------- ---------------- ----- --
- --------
-- -------
------ ----- --------- - --------- -- -
----- ----- - ------------
------------
--------------------------------------------------
--
-- ----------------------------
----- ------------- - -------- -- -----------------------
-- ----------------------------
----- ------------ - ---------------
-------------- - -------- -- -
-------------- ----- -------- -------- - ------ - ---
----------------------
--
-- ----------------
-------------- - -----------------------------
------ ------
--
-- -----------------------------
------ ----- ------- - -------------------------使用connect和Selectors
dva-immer也支持使用React-Redux的connect和Selectors
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------
----- ------- - -- ------ -------- -- -- -
----- -------- - -- -- -
---------- ----- ---------------- ---
--
------ -
-----
--------------------
------- ----------- -- ---------- ----- ---------------- --------------
------- -----------------------------
------
--
--
-- ------------------
----- --------------- - ------- -- --
------ ------------
---
-- -----------------
----- -------- - -
------ -
---- --
--
--
------ ------- --------------------------------- ----------总结
通过dva-immer这个插件，我们可以简化我们在使用Redux处理复杂状态树时的编码量，只需花费很少的时间来掌握dva-immer的API，就可以专注于业务逻辑的实现。更值得一提的是dva-immer的API和Redux中的API在很大程度上是兼容的，我们可以使用Redux的所有特性来管理状态，这无疑给我们开发带来了极大的便利。如果你正在使用dva构建React应用，请务必尝试dva-immer这个插件，它将为你开发带来全新的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3df2ebdbf7be33b256713e