简介
rematches 是一款基于 rematch 框架封装的 redux 工具库，它提供了一些简单易用、高可扩展的工具函数，可以轻松地实现 redux 的各种功能。
rematches 的主要功能包括：models 定义、actions 的定义、reducers 的定义、selectors 的定义，同时还提供了一些钩子函数，以便在各个阶段对 redux 进行扩展。
安装
安装 rematches 的最简单的方式是使用 npm 或 yarn 包管理器进行安装：
--- ------- --------- ------
或者
---- --- ---------
使用
初始化
在使用 rematches 之前，我们需要初始化一个 rematch 实例，以便在之后的项目中使用：
------ - ---- - ---- ---------------- ----- ----- - ------ ------- --- ---
models 定义
models 定义是 rematches 中最基础的部分，它定义了一个 redux 的状态树，以及这个状态树的初始值、更新方式等。我们可以把它看做一个数据模型：
----- ------- - -
------ --
--------- -
---------- ------- -------- -- ----- - --------
--
--这个数据模型表示一个计数器，其初始值为 0，提供了一个名为 increment 的 reducer，每次调用它时将 state 增加传入的参数。
对于一个较为复杂的项目来说，定义多个数据模型是必要的，这样可以更好地划分代码结构，方便管理和维护。
actions 定义
定义 actions 是 rematches 中第二个基本部分，它是 models 中 reducers 的触发器，可以实现一系列异步操作：
----- ----- - -
------ ---
--------- -
---- ------- -------- -- --------
---- ------- -------- -- ---------- ---------
--
-------- -
------ ----- -- -- -
----- -------- - ----- ----------------------------------------------------
----- ----- - ----- ----------------
------ - ---- ----- --
--
------- ----- --------- -- -
----- -------- - ----- --------------------------------------------------- -
------- -------
----- ------------------------
---
----- ---- - ----- ----------------
------ - ---- ---- --
--
--
--这里定义了一个名为 users 的数据模型，它包含了两个 reducer（set 和 add）和两个 effect（fetch 和 create）。set 和 add 的功能已经在注释中说明，这里不再详细解释。
fetch 和 create 是两个异步 effect，fetch 可以从远端服务器获取用户信息并更新状态；create 可以向远端服务器添加新的用户并更新状态。我们可以在触发这两个 effect 时从服务器端获取数据和结果。effect 函数的返回值是一个对象，该对象将会作为 reducer 函数的参数进行使用。
reducers 定义
reducers 定义是 rematches 中第三个基本部分，它是 redux 中状态的更新方式：
----- ----- - -
------ ---
--------- -
---- ------- -------- -- --------
---- ------- -------- -- ---------- ---------
------- ------- -------- -- ------------------- -- ------- --- ---------
--
--这里定义的 todos 模型提供了三个 reducer，分别是 set、add 和 remove，每个 reducer 都会根据传入的 payload 更新数据模型中的状态。
selectors 定义
selectors 定义是 rematches 中第四个基本部分，它是从 redux 中获取状态数据的工具函数，可以对状态数据进行过滤、排序等操作：
----- ----- - -
------ ---
--------- -
---- ------- -------- -- --------
---- ------- -------- -- ---------- ---------
--
---------- -
------- ------- -- ------
-------- ------- --- -- ----------------- -- ------- --- ----
--
--在上述代码中，我们定义了两个 selector 函数，一个是 getAll，它可以获取所有的用户；另一个是 getById，可以根据传入的 id 获取特定的用户。
使用中间件
在 rematches 中使用中间件非常简单，只需要将我们需要的中间件导入并在初始化 rematch 实例时传入即可：
------ - ---- - ---- ---------------- ------ ----------- ---- ----------------- ----- ----- - ------ ------- --- -------- ---------------- ---
这里我们定义了一个使用 immer 中间件的 rematch 实例。immer 是一个非常方便的工具库，可以轻松地生成不可变数据，让我们的代码更加清晰简洁。
总结
rematches 是一款非常有用的基于 rematch 框架的 redux 工具库，它提供了一系列工具函数，可以方便、快速地实现 redux 中的各种功能。在本文中，我们了解了 rematches 的基本概念和使用方法，包括 models、actions、reducers 和 selectors 的定义及使用。希望读者可以通过阅读本文加深对 rematches 的理解，更好地应用 rematches 在实际项目中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/69808