在前端开发中，Redux 是一个非常流行的数据管理工具。而 Redux 的一个最大的优点就是它的可复用性。通过封装一些常用的 Redux 模块，我们可以快速地构建出自己的应用程序。
今天，我们来介绍一个非常有用的 npm 包：redux-model-utils。这个库可以帮助我们更方便的管理 Redux 模块。
安装和使用
redux-model-utils 可以通过 npm 来进行安装：
npm install redux-model-utils
安装完成后，在项目中进行如下操作：
import { makeModel, makeCrudService } from 'redux-model-utils';makeModel
makeModel 函数可以将一个纯对象转换成一个 Redux 模块。在实际开发中，我们需要为每个实体类（例如 users、posts 等等）定义一个 Redux 模块，并对其进行管理。
通过 makeModel 函数，我们可以为每个实体类生成一个 Redux 模块：
-- -------------------- ---- -------
-- --------
------ - --------- - ---- --------------------
------ ------- -----------
----- --------
------ -
----- ---
------- -----
--
--------- -
----------- ------- - ------- -- -- -- --------- ----- ------- ---
---------- ------- - ------- -- -- -- --------- ------- ------- ---
--
-------- -
------------- - ---------- -- -
-- --------- ---- --
------------- ----- ------ -- - ----- ------ ----
--
-------------- ------- -- - --------- -- -
-- --------- ------ --
----- ---- - - --- ----------- ----- ------ --
----------------
--
--
---这段代码定义了一个 users 模块。我们主要关注三个属性：state、reducers 和 effects。
- state 定义了 users 模块的初始状态
- reducers 定义了 users 模块的更新函数，用于更新 state
- effects 定义了 users 模块的副作用（例如网络请求、localStorage 等等）
其中，reducers 和 effects 的函数签名是相同的：(state, action) => newState
在上面的代码中，我们定义了两个 reducers 函数——updateList 和 setDetail，以及两个 effects 函数——fetchList 和 fetchDetail。updateList 和 setDetail 的实现非常直白——它们仅仅是将 action 的 payload 数据更新到 state 中。而 fetchList 和 fetchDetail 则是用于发起异步请求的。
通过 makeModel，我们可以得到一个符合 redux 标准的 reducer 函数，我们可以在 redux 的 createStore 函数中使用：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ---------- ---- ----------------- ----- ---------- - ----------------- -- --- ------ ------------------- -- --- --- ----- ----- - ----------------------- ---------------------------------
之后，在代码中可以通过 dispatch 操作来触发 reducers 和 effects：
// 触发 reducers
dispatch({ type: 'users/setDetail', payload: { id: 1, name: 'John' } });
// 触发 effects
dispatch({ type: 'users/fetchList' });makeCrudService
除了 makeModel，redux-model-utils 还提供了 makeCrudService 函数，可以帮助我们更方便的生成一个数据服务。makeCrudService 提供了默认的 reducer、actions 和 effects，我们只需要传入相应的参数即可。
-- -------------------- ---- ------- ------ - --------------- - ---- -------------------- ----- ----------- - ----------------- ----- -------- ---- --------- --- -- -------- ----- ------ -------------------------------- --------------------------------
上面的代码定义了一个 userService。使用 makeCrudService，我们无需再手写 reducers 和 effects，只需要传入 name 和 url 两个参数即可。在这个例子中，我们定义了一个 userService，它通过 /users 接口从后端获取数据。
通过上面的配置，我们可以得到五个默认的 action：
- users/create
- users/read
- users/update
- users/delete
- users/fetchList
我们可以通过 userService.effects.fetchList() 来发起一个异步请求。
注意：在使用 makeCrudService 之前，需要配置 redux-thunk 中间件来支持异步操作。
总结
redux-model-utils 是一个非常方便的 redux 辅助工具库，通过它，我们可以更快速、更方便地定义和管理 Redux 模块。本文介绍了 redux-model-utils 中的 makeModel 和 makeCrudService 函数，它们可以帮助我们更快速地定义和管理 Redux 模块。
通过使用 redux-model-utils，我们可以更专注于应用程序的业务逻辑，同时更方便地开发和更新我们的代码。在实际开发中，我们可以根据自己的需求扩展和修改 redux-model-utils，以更好地满足我们的项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b88