简介
rematches 是一款基于 rematch 框架封装的 redux 工具库，它提供了一些简单易用、高可扩展的工具函数，可以轻松地实现 redux 的各种功能。
rematches 的主要功能包括：models 定义、actions 的定义、reducers 的定义、selectors 的定义，同时还提供了一些钩子函数，以便在各个阶段对 redux 进行扩展。
安装
安装 rematches 的最简单的方式是使用 npm 或 yarn 包管理器进行安装：
npm install rematches --save
或者
yarn add rematches使用
初始化
在使用 rematches 之前，我们需要初始化一个 rematch 实例，以便在之后的项目中使用：
import { init } from '@rematch/core'; const store = init({ models: {}, });
models 定义
models 定义是 rematches 中最基础的部分，它定义了一个 redux 的状态树，以及这个状态树的初始值、更新方式等。我们可以把它看做一个数据模型：
const counter = { state: 0, reducers: { increment: (state, payload) => state + payload, }, };
这个数据模型表示一个计数器，其初始值为 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 中状态的更新方式：
const todos = { state: [], reducers: { set: (state, payload) => payload, add: (state, payload) => [...state, payload], remove: (state, payload) => state.filter((todo) => todo.id !== payload), }, };
这里定义的 todos 模型提供了三个 reducer，分别是 set、add 和 remove，每个 reducer 都会根据传入的 payload 更新数据模型中的状态。
selectors 定义
selectors 定义是 rematches 中第四个基本部分，它是从 redux 中获取状态数据的工具函数，可以对状态数据进行过滤、排序等操作：
-- -------------------- ---- ------- ----- ----- - - ------ --- --------- - ---- ------- -------- -- -------- ---- ------- -------- -- ---------- --------- -- ---------- - ------- ------- -- ------ -------- ------- --- -- ----------------- -- ------- --- ---- -- --展开代码
在上述代码中，我们定义了两个 selector 函数，一个是 getAll，它可以获取所有的用户；另一个是 getById，可以根据传入的 id 获取特定的用户。
使用中间件
在 rematches 中使用中间件非常简单，只需要将我们需要的中间件导入并在初始化 rematch 实例时传入即可：
import { init } from '@rematch/core'; import immerPlugin from '@rematch/immer'; const store = init({ models: {}, plugins: [immerPlugin()], });
这里我们定义了一个使用 immer 中间件的 rematch 实例。immer 是一个非常方便的工具库，可以轻松地生成不可变数据，让我们的代码更加清晰简洁。
总结
rematches 是一款非常有用的基于 rematch 框架的 redux 工具库，它提供了一系列工具函数，可以方便、快速地实现 redux 中的各种功能。在本文中，我们了解了 rematches 的基本概念和使用方法，包括 models、actions、reducers 和 selectors 的定义及使用。希望读者可以通过阅读本文加深对 rematches 的理解，更好地应用 rematches 在实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69808
