Rematch，改变我对你状态管理认知！

2023-12-23 09:57:30

浅析 Rematch 源码

入职后，公司的技术栈依然是 React，但状态管理从我原本熟悉的 Redux 进化成了 Rematch。用起来也着实方便了不少，减少了很多样板代码的编写，同时也不用引入中间件来管理异步的 action 了。但在用起来的过程中，也难免会引起我对 Rematch 内部实现的深思。所以我打算对其源码一探究竟，来深度了解一下这个神奇的工具。

了解 Rematch

Rematch 是一个基于 Redux 的状态管理库，它集成了 Redux 和 Redux-Thunk 的功能，同时还提供了一些额外的特性，比如：

支持异步操作，而无需使用中间件
简化了 store 的创建和配置
提供了一些内置的 helper 函数来简化代码编写

Rematch 的实现原理

Rematch 的实现原理其实很简单，它就是对 Redux 的一个封装。Rematch 在内部创建了一个 Redux store，并将其暴露给用户。同时，它还提供了一些额外的特性，比如：

异步操作：Rematch 使用了一个名为 redux-thunk 的库来支持异步操作。redux-thunk 允许你在 action creator 中返回一个函数，这个函数可以异步地执行一些操作，然后在操作完成之后再派发一个 action。
简化 store 的创建和配置：Rematch 提供了一个名为 createStore 的函数来简化 store 的创建和配置。createStore 函数接受一个 reducer 函数和一个初始状态作为参数，并返回一个 Redux store。
内置的 helper 函数：Rematch 提供了一些内置的 helper 函数来简化代码编写。比如，useSelector 函数可以让你从 store 中获取状态，useDispatch 函数可以让你派发 action。

Rematch 的使用

Rematch 的使用非常简单。首先，你需要安装 Rematch 库：

npm install rematch

然后，你可以在你的代码中创建一个 Rematch store：

import { createStore } from 'rematch';

const store = createStore({
  reducers: {
    counter: {
      increment: state => state + 1,
      decrement: state => state - 1
    }
  },
  initialState: {
    counter: 0
  }
});

接下来，你就可以使用 useSelector 和 useDispatch 来从 store 中获取状态和派发 action 了。比如：

import { useSelector, useDispatch } from 'rematch';

const Counter = () => {
  const count = useSelector(state => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
};