Dva 是一个基于 React 和 Redux 的前端框架，它为我们提供了一种可预测的数据流方式来管理应用状态。而 effects 是 Dva 中一项非常重要的功能，它可以让我们在异步请求、副作用处理等方面，轻松地解决许多问题。本文将介绍 Dva 中 effects 的使用，帮助大家更好地理解和使用 Dva。
effects 是什么？
effects 可以理解为 Redux 中的 middleware，它是一个处理副作用的函数。在 Redux 中，我们通常会使用 Redux-thunk 或 Redux-saga 来处理异步请求和处理副作用。而在 Dva 中，我们可以通过 effects 来实现类似的功能。通过 effects，我们可以在触发 action 时执行一些异步操作，例如获取后端 API 数据等。
在 Dva 中，effects 的执行会被 Redux-saga 所管理。每个 effect 是一个 Generator Function，可以通过 redux-saga/effects 中提供的 API 来处理异步操作。
如何使用 effects？
在 Dva 中，我们需要创建一个名为 effects 的属性来管理 effects 函数。例如：
------ - ----- - ---- ------------
------ - ---- --------- - ---- --------------------
------ ------- -
---------- ----------
------ ---
--------- ---
-------- -
---------------------- - ----- --- -- -
----- ----------- ----- -- ------
----- ----- ----- --------------- -- -- -------- ------
--
--
-------------- ---
-这是一个最基本的 Example model，其中，exampleEffect 就是一个 effects 函数。
在 effects 函数中，我们可以使用 call 和 put 方法执行异步操作。call 方法用于执行一个异步函数并等待它返回结果，而 put 方法则用于通过 dispatch 方法发送一个 action 给 Redux store，触发对应的 reducer。
在上面的例子中，我们使用了 redux-saga 提供的 delay 方法来模拟耗时操作，然后使用 put 方法发送了一个 exampleAction 的 action。
需要注意的是，在 effects 函数中，我们不要直接去修改 state，因为这违背了 Redux 的设计初衷。如果需要改变 state，我们需要通过 dispatch action 触发 reducer 实现。
使用 effects 的注意事项
在使用 effects 时，我们需要注意以下几点：
- 处理异步操作时一定要使用 call 方法，这是 redux-saga 中区分同步和异步操作的重要手段。
- effects 函数必须是 Generator Function，需要使用 * 符号进行声明。并且，在 effects 函数中必须使用 yield 关键字来执行异步操作，这样才能被 Redux-saga 所管理。
- 在 effects 函数中，不要直接修改 state，而是使用 put 方法触发 reducer 修改状态。
- 在 Dva 中，effects 函数会被放在套件的作用域下，也就是说，如果我们在不同的 model 中使用同样的 effects 函数，它们之间是互不影响的。
实际应用
现在我们来使用 effects 来实现一个简单的异步改变状态的操作。
先创建一个 Example 组件，用于触发异步操作：
------ ----- ---- --------
------ - ------- - ---- ------
----- ------- - -- -------- -- -- -
-----
------- ----------- -- ---------- ----- ----------------------- ----
------
---------
------
--
------ ------- -------------------然后，我们来创建一个 dva model，命名为 example，用于处理 Example 组件的状态改变：
------ - ----- - ---- ------------
------ - ---- --------- - ---- --------------------
------ ------- -
---------- ----------
------ -
------- ------
--
--------- -
---------------- - ------- -- -
------ - --------- ------- ------- --
--
--
-------- -
- ---------------- - ----- --- -- -
----- ----------- ------ -- ------
----- ----- ----- ------------ -------- ----- --- -- -- ------ -- -----
--
--
--最后，我们将 Example 组件和 model 关联在一起：
------ - ------ - ---- ------ ------ ------- ---- ------------ ------ ------- ---- ------------ ----- --- - --------- ------------------- ------------- -- -------- ---- -------------------
现在，我们就可以在 Example 组件中点击按钮，触发 exampleEffect 函数，等待 1 秒后改变状态了。
总结
本文介绍了 Dva 中 effects 的使用和注意事项。通过这篇文章，相信大家对 effects 已经有了更深入的了解。实际上，在实际开发中，效果处理是非常常见的需求，因此了解 effects 的使用非常重要。希望本文可以对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654346687d4982a6ebcef5a8