Redux 是前端状态管理中最常用的库之一，但是它的学习曲线有些陡峭，使用起来也比较繁琐。Rematch 就是为了解决这个问题而产生的，它是一个基于 Redux 的简化版状态管理库，能够提供更加便捷的开发体验。本文将详细介绍 Rematch 的用法，并提供示例代码。
安装
首先需要安装 rematch 和 react-redux 这两个库：
npm i rematch react-redux
创建 models
在 Redux 中，我们需要定义 actions、reducers 和 selectors 等概念，然后再将它们组合起来创建 store。Rematch 则采取了不同的方式，它允许我们以 model 为单位来组织代码，每个 model 对应一个子模块，包含自己的 state、reducers 和 effects（类似于 Redux 中的 actions）等。
下面是一个示例 model 的代码：
-- -------------------- ---- -------
----- ----- - -
------ --
--------- -
---------- ----- -- ----- - --
---------- ----- -- ----- - --
--
-------- -------- -- --
----- ---------------- -
----- --- --------------- -- ------------------- ------
--------------------------
--
---
-这个 model 定义了一个名为 count 的子模块，它包含了一个状态 state 和两个 reducers：increment 和 decrement。这两个 reducers 的作用分别是将 state 加一和减一。
除了 reducers，我们还可以定义 effects。effects 是一个异步的操作，它可以通过 dispatch 调用其他的 reducers 或 effects，从而实现对状态的修改。
创建 store
在 Rematch 中，我们只需要将所有的 models 集中起来，然后交给 init() 函数处理就行了。下面是一个示例代码：
-- -------------------- ---- ------- ------ - ---- - ---- --------------- ------ ----- ---- ---------------- ----- ------ - - ------ - ----- ----- - ------ ------- --
使用 state 和 reducers
与 Redux 类似，我们可以使用 connect 函数将组件与状态关联起来，并通过 mapStateToProps 和 mapDispatchToProps 参数来映射 state 和 reducers 到组件的 props 中。下面是一个例子：
-- -------------------- ---- -------
------ - ------- - ---- -------------
-------- --------- ------ ---------- --------- -- -
------ -
-----
------- ------------------------------
--------------------
------- ------------------------------
------
-
-
----- -------- - ----- -- --
------ ------------
--
----- ----------- - -------- -- --
---------- -- -- ---------------------------
---------- -- -- ---------------------------
--
------ ------- ----------------- ---------------------使用 effects
在组件中调用 effect 也很简单，只需要通过 dispatch 函数调用即可。下面是一个使用 effect 的示例：
-- -------------------- ---- -------
-------- --------- ------ -------------- -- -
------ -
-----
------- -------------------------- --------------
--------------------
------
-
-
----- ----------- - -------- -- --
--------------- -- -- --------------------------------
--
------ ------- ----------------- ---------------------在这个例子中，我们使用了一个名为 incrementAsync 的 effect，在点击按钮时会等待一秒钟后再调用 count/increment 这个 reducer 来增加 count 的值。
总结
Rematch 相比于 Redux 简单易用，能够提供更好的开发体验。它采取了以 model 为单位来组织代码的方式，通过 reducers 和 effects 来修改状态，并且提供了与 React 组件的连接方式。希望本文能够对你学习 Rematch 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11581
