Effector 是一个由社区驱动的 React 状态管理库，它提供了一些有别于以往的可预测的状态操作途径。受到了 Mobx、Redux 等一系列库的启发，Effector 独辟蹊径，实现了一种全新的状态管理方式，可以更加便捷地使用异步操作和副作用。本文将从如下三个方面，简单介绍一下 Effector 的基本使用方式，其优点及其原理的简介。
Effector 基本操作入门
Effector 按原理可分为三个部分，状态基础、事件和效用，可以被各自独立使用，也可以与其他部分结合串联，形成一个完整的状态管理体系。在这里，首先我们来简要了解一下 Effector 的状态部分。
Effector 通过 createStore 函数创建一个状态对象，其中包含两个基本字段——状态和事件，以及其他一系列自定义的配置信息，如下所示： ``` import { createStore } from 'effector'; const store = createStore({ count: 0, increment: (state) => state + 1, decrement: (state) => state - 1, }); ```
通过以上代码创建出的 store 对象就可以用于在各个 React 组件中使用。我们可以通过 getState 方法获取到当前的 store 状态值，也可以通过一个叫 watch 的辅助函数来在状态被更新时执行特定的事务，如下所示： ```store.watch(() => { console.log(store.getState().count); }) ```
watch 已经帮我们完成了 store 的监听，每当状态中的 count 值被更新，就会自动执行 log 语句，从而达到实时查看 store 内的变化的目的。
Effector 的梦幻副作用
Effector 提供了一种非常舒适的方式来处理异步副作用，可以让你在逻辑中使用异步操作而无需担心关于 race condition、取消请求等问题，工作起来非常简单，非常值得介绍。
与 Redux 等预测状态库不同，Effector 使用了效用的概念，并允许副作用通过通道（又称为事件）更改状态。这意味着您可以使用带副作用的函数，并且通过传递事件来更改状态。
下面是一个示例，展示了如何使用 Api 使用 Effector 副作用： ``` import { createEvent, createStore, createEffect } from 'effector'; const getSomeData = createEffect({ async handler() { const response = await fetch('/some/data'); const json = await response.json(); return json; } }); const dataReceived = createEvent(); const $data = createStore({}) .on(dataReceived, (_, payload) => payload); getSomeData.doneData.watch((payload) => { dataReceived(payload); }) ```
在以上代码中，我们首先定义了一个 getSomeData 副作用，它会发起异步请求来获取特定 url（/some/data）的数据，并返回从服务器请求回来的处理后的结果。我们生成了一个叫做 dataReceived 事件，当 getSomeData 执行成功时，dataReceived 将会被触发并带有 getSomeData 执行的结果作为它的 payload。我们现在又可以通过使用 dataReceived 来更新 $data 物件，$data 就像我们在第一部分中定义的 store 一样。$data 物件上的更新可以通过在 watch 上观察效应完成事件来知道，如上所示。在这个简单的例子中，Effector 取代了 Redux 繁琐的 boilderplate。
Effector 的几何优点
Effector 内部是使用一个叫做干事的技术来实现的，不同于传统状态管理器中的 Action-Reducer、Flux 单向数据流等方式。它提供了一种更加灵活的方式来处理可重入状态活动，从而使您可以获得更优异的性能体验。Effector 的四个显式优点如下：
- Effector 速度极快
- Effector 处理异步能力
- Effector 支持函数作为事件
- Effector 对于 React 的原生支持方式
它的第一个显式优点是速度，这是因为我们跳过了基于依赖性 RDD 形式（Mobx、Redux）的内存嵌入式进行优化。每次更新时，Redux 需要通过相关 store 和 reducers，先进行某种类型的 diffing 算法，然后才能生成新的污染版本的 store 对象。Effector 跳过了 diffing 和暴露 storeWatcher 应用程序的耗时操作，直接将更新应用于 store 和 callback 函数的队列中。
效果非常显著，当我们使用 Effector 更新 store 对象时，速度会明显提高，因此我们可以轻易地将 Effector 对象用于大型实时应用，直接保持完全重新渲染。
第二个显式优点是处理异步能力。由于 Effector 本质上就是一个事件和函数体的集合，因此它能够支持异步和基于 Promise 的操作，这些操作与常规借调 resolver 非常类似，但比 resolver 更加灵活。
第三个显式优点是支持函数作为事件。您可以在 Effector 中使用纯函数而不需要任何副作用，这是因为所有 Effects（包括异步 Effects）都被看作是事件。
Effector 的内部结构使得 React 原生支持方式简单而直接。尤其是在处理频繁 setState 操作时，在对高实时性应用程序的更改进行更新时，Effector 尤为有用。
结语
本文简单介绍了 Effector 的状态操作方式，副作用功能及其以上优势。相信通过这篇文章，大家能够对 Effector 库有初步的认识，以帮助大家简化状态管理、范式化的高度应用，对如何构建更好的 React 应用提供了有益的思路。
