在前端开发的过程中，我们经常需要使用 redux 来管理全局状态，但是 redux 的编写和维护过程都比较繁琐，需要写很多的 reducer 和 action，也需要手动组织代码。针对这个问题，开发者可以使用 react-redux-models 这个 npm 包，它能够帮助我们更方便、更快速的管理全局状态。下面就来介绍 react-redux-models 的基本用法。
1. 安装 react-redux-models
使用 npm 安装 react-redux-models：
npm install react-redux-models --save
2. 创建 Model
创建 Model 文件，在里面定义初始状态和 action，例如：
-- -------------------- ---- -------
-- -------
----- ------------ - -
----- ---
---- --
--
------ ------- -
----- -------
------ -------------
--------- -
-------------- - -------- ---- -- -
------ - --------- ---- --
--
------------- - -------- --- -- -
------ - --------- --- --
--
--
-------- -
------------ -------- -- -- - ----- --- -- -
----- --- - ----- ------------------- ----
----- ----- ----- ---------- -------- -------- ---
----- ----- ----- --------- -------- ------- ---
--
--
--Model 文件包含四个部分：
name：Model 的名称，必须唯一。
state：Model 的初始状态。
reducers：可以理解为 redux 中的 reducer，用来更新状态。
effects：可以理解为 redux 中的 action，异步操作和副作用处理。
3. 注册 Model
在应用的入口文件中，将 Model 注册到 react-redux-models：
// index.js
import { registerModels } from "react-redux-models";
import user from "./models/user"; // 引入上一步创建的 User Model
registerModels([user]);
ReactDOM.render(<App />, document.getElementById("root"));4. 使用 Model
在组件中使用 Model：
-- -------------------- ---- -------
------ - ------- - ---- ---------------------
----- ---- ------- --------------- -
------------------- -
----- - ---------- ------ - - -----------
----------------------------
-
-------- -
----- - --------- - - -----------
----- - ----- --- - - ----------
------ -
-----
-------- ----------
------- ---------
------
--
-
-
----- --------------- - -- --------- -- -- --
----------
---
------ ------- -------------------------------connect 函数将需要的 Model 对象映射到组件的 props，可以直接访问 Model 的属性和方法。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
-- --------------
----- ------------ - -
----- ---
---- --
--
------ ------- -
----- -------
------ -------------
--------- -
-------------- - -------- ---- -- -
------ - --------- ---- --
--
------------- - -------- --- -- -
------ - --------- --- --
--
--
-------- -
------------ -------- -- -- - ----- --- -- -
----- --- - ----- ------------------- ----
----- ----- ----- ---------- -------- -------- ---
----- ----- ----- --------- -------- ------- ---
--
--
--
-- ------------------
------ - ------- - ---- ---------------------
----- ---- ------- --------------- -
------------------- -
----- - ---------- ------ - - -----------
----------------------------
-
-------- -
----- - --------- - - -----------
----- - ----- --- - - ----------
------ -
-----
-------- ----------
------- ---------
------
--
-
-
----- --------------- - -- --------- -- -- --
----------
---
------ ------- -------------------------------
-- --------
------ - -------------- - ---- ---------------------
------ ---- ---- ----------------
------ --- ---- --------
-----------------------
-------------------- --- ---------------------------------总结
以上就是使用 react-redux-models 管理全局状态的基本方法，相信这个 npm 包能够帮助前端开发者更加高效地处理全局状态。思路类似于 dva 的 models，但 react-redux-models 更加轻量，常用的方法也更加直观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1381e8991b448daaa4