Redux-Toolkit 和 Redux-Rematch 的对比

大家好，我是晨光，之前给大家分享了一期 Redux 的各种工具和中间件，但都有些停留在表面。如果非要选一个用在项目里，大家都是会有一些个人的偏好选择。本期分享一下，Redux-Toolkit 和 Redux-Rematch 的对比，也是实际写了 Demo ，体验之后的一些对比。

1、包的 size

https://bundlephobia.com/package/@reduxjs/toolkit@2.2.3

https://bundlephobia.com/package/@rematch/core@2.2.0

上面的链接可以看到两个包的 size 对比，可以明显的看到，toolkit 的包明显大很多，这是因为它自身依赖了别的包。但抛开别的包，自身也约有 7k。

@reduxjs/toolkit 是官方提供的 Redux 工具包，它提供了许多工具和约定来简化 Redux 的使用。它包含了许多内置的功能和工具，如 Redux Toolkit Query、Redux DevTools Extension 等，功能多，包大些，可以理解。

@rematch/core 则是一个轻量级的 Redux 管理库，它的设计目标是简化 Redux 的使用，但功能相对较少，所以包小

2、代码行数

同一个功能实现的 demo，两种状态管理工具的代码行数进行了对比

Toolkit 文件数 24，代码行数 571

Rematch 文件数 36，代码行数 704

相比之下，Toolkit 的代码行数少 130 行。但demo 比较小，相对来说，这个比较没什么大的说服力，但是可以知道的是，Rematch 有很多模版代码

3、单个 model 创建

两种方式都比较相似，都是可以单独的模块自己创建。最终再统一注入到 store 中

Toolkit 的方式是创建 Slice 切片的方式，把单个的 model 可以放在对应的 View 模块内，也就是把视图层和逻辑层放在一起，有些类似 MVP 常用的架构，代码找起来也更容易。

上面截图的 Rematch 的目录结构比较传统，View 和 Model 层在「物理层」就区分的比较明显，那么对于 redux 熟悉的同学，找代码调试起来，就较为容易。对于这类架构不熟悉的，代码看起来让人头痛。当然，也是可以调整为 Toolkit 的目录结构，这也只是一种写法而已。

4、state 和 action 使用

Toolkit 只需 import 就能直接使用

Rematch 必需要用 connect 函数把 state 和 action 传递到 props 中，再通过 props 获取后再使用

写法上，Toolkit 更优雅，而且还能减少一些模版代码，并且方法什么的，高亮的也比较明显，跳转到方法的实现地方也更方便。

5、reducer 中 state 更新的写法

Toolkit 中更新某个值，直接修改 state 中的值即可，无需返回新的 state，而且如果嵌套的层级很深，也可以直接更改，因为 toolkit 中引用了 immer ，让 state 更新的写法更优雅

Rematch 中 state 的更新，和常规的 redux 并无差别，需要各种 ... ，或者 Object.assign 等拷贝原 state，再更改新的值

6、处理异步

先看下面的异步函数的写法

1）Toolkit 处理异步的方式

1. 使用 createAsyncThunk 创建请求
2. 通过 getState 方法获取 rootState
3. 状态变更直接使用 dispatch 调用更是数据的 reducer

1. view 层，通过 dispatch 调用 createAsyncThunk 创建的异步方法，与普通的 reducer 函数调用方式一样。

2）Rematch 处理的方式

1. 自定义 async 方法
2. 需要把 rootState 作为参数传入
3. 链式 reducer 更新数据
4. 需要通过 props 注入才能使用

7、总结

两个 Demo 体验对比下来，Toolkit 确实写起来更爽些，不管是 State 还是 reducer 函数，都可以通过 export 和 import，使用的地方也是通过 hooks 函数调用，代码的脉络看起来较为清晰，所以个人比较推荐 Toolkit。

以上，全文完，有收获记得点个赞呀👍～