Rematch: 一个更好用的 Redux

Redux 是前端状态管理中最常用的库之一，但是它的学习曲线有些陡峭，使用起来也比较繁琐。Rematch 就是为了解决这个问题而产生的，它是一个基于 Redux 的简化版状态管理库，能够提供更加便捷的开发体验。本文将详细介绍 Rematch 的用法，并提供示例代码。

安装

首先需要安装 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

Rematch 一个更好用的 Redux

Rematch: 一个更好用的 Redux

安装

创建 models

创建 store

使用 state 和 reducers

使用 effects

总结