在 Redux 中，reducer 通常用来处理 action 的状态变更，它的主要职责是返回新的状态。但是有时候我们可能需要从外部 API 获取数据来更新状态，这时候我们就需要在 reducer 中调用外部 API。但是如果不小心处理不当，这种做法可能会影响应用的性能和可维护性。
在本文中，我们将探讨如何在 Redux 中正确地调用外部 API，并提供一些例子来说明这种做法。
为什么在 reducer 中调用外部 API 不是一个好主意
在 Redux 中 reducer 的职责非常明确，它只需要根据传入的 action 返回一个新的状态。它并不应该处理异步操作，比如调用外部 API。为什么呢？
性能问题：因为在 reducer 中调用外部 API 是一个异步操作，如果我们在 reducer 中处理异步操作，它可能会被多次调用。如果我们每次调用 reducer 都要执行一遍外部 API，那么它会很消耗性能。
可维护性问题：如果我们把异步操作放在 reducer 中，那么我们的 reducer 可能会变得很难维护。我们可能需要在 reducer 中处理很多不同的异步操作，这样我们的代码就会变得非常混乱。此外，在 reducer 中处理异步操作还会使测试变得更加困难。
如何在 reducer 中调用外部 API
虽然在 reducer 中调用外部 API 通常不是一个好主意，但有些情况下，我们必须这样做。例如，当数据从外部 API 更新时，我们可能需要在 reducer 中进行操作。在这种情况下，我们可以尝试以下两种方法：
1. 使用 Redux Thunk
Redux Thunk 是一个中间件，它允许我们在 action 中使用函数而不是对象。我们可以在 action 中创建一个函数，这个函数可以在同步和异步情况下都有效。
下面是一个示例代码：
-- -------------------- ---- -------
------ - ---------------- - ---- -------------------
------ - --------- - ---- -----------------
------ ----- --------------- - -----------------
-----------------
----- -------- -- -
----- -------- - ----- ------------------
------ --------------
-
--然后，我们可以在 reducer 中使用这个 action：
-- -------------------- ---- -------
------ - --------------- - ---- -----------------
----- --------- - -------------
----- -------
------------- -
----- -----
-------- ------
--
--------- ---
-------------- --------- -- -
---------------------------------------- ------- -- -
------------- - -----
---
------------------------------------------ ------- ------- -- -
------------- - ------
---------- - ---------------
---
----------------------------------------- ------- ------- -- -
------------- - ------
---
--
---这里，我们使用了 createAsyncThunk 函数来定义一个异步 action。在初始状态下，loading 属性设置为 false。在 pending 阶段，我们将 loading 设置为 true。在 fulfilled 阶段，我们将 loading 设置为 false，再将 API 返回的数据存储到状态中。在 rejected 阶段，我们设置 loading 为 false。
2. 在 action 中调用外部 API
我们也可以选择在 action 中调用外部 API 而不是在 reducer 中。
下面是一个示例代码：
-- -------------------- ---- -------
------ - --------- - ---- -----------------
------ ----- --------------- - -------- -- ----- ---------- -- -
--- -
----- -------- - ----- ------------------
----------
----- ---------------------
-------- --------------
---
- ----- ------- -
----------
----- ---------------------
-------- --------------
---
-
--这里，我们定义了一个异步 action，用于获取用户数据。当 action 被调用时，它会调用外部 API 并发送 FETCH_USER_SUCCESS 或 FETCH_USER_FAILURE action。
结论
在 Redux 中，将异步操作放在 reducer 中通常不是一个好主意，因为它会影响应用的性能和可维护性。相反，我们可以使用 Redux Thunk 或者在 action 中调用外部 API。这样，我们可以避免出现潜在的性能问题，并将代码变得更加易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f53033c5c563ced56fdd1e