在 Redux 中，如果需要进行异步操作，可以使用 Redux-saga 或 Redux-thunk 这两个中间件。Redux-saga 和 Redux-thunk 都可以处理异步操作，但使用方式上有一些不同。本文将会介绍它们的区别，并探讨哪些场景使用 Redux-saga 更适合，哪些场景使用 Redux-thunk 更适合。
Redux-thunk
Redux-thunk 允许我们派发一个函数而不是一个对象，同时这个函数可以带有异步操作。这个函数接受 dispatch 和 getState 两个参数，用于向 store 中 dispatch 一个 action 或者获取当前 state。
下面是一个简单的示例，展示如何使用 Redux-thunk 异步获取数据，并将数据 dispatch 到 store 中：
------ - ---------------- ----------- - ---- --------
------ ----- ---- --------------
----- ------------ - -
----- -----
---------- ------
--
-- ------ --------
----- ----------- - -- -- -- ----- -------------- ---
----- ----------- - ------ -- -- ----- --------------- ---- ---
-- -------
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------
------ - --------- ---------- ---- --
---- ---------------
------ - --------- ---------- ------ ----- ----------- --
--------
------ ------
-
--
-- ----- ------ -------
----- --------- - -- -- -
------ ---------- -- -
------------------------
-------------------------------------
--------- -- -----------
---------- -- -----------------------------
--
--
-- ------ -----
----- ----- - -------------------- ------------------------
-- -------- ----- ------
----------------------------在上面的例子中，fetchData 函数返回了一个函数，这个函数接受 dispatch 作为参数，用于在异步操作完成后 dispatch 一个 action。通过使用 Redux-thunk，我们可以让异步操作和 dispatch action 变得更加容易。
但是，Redux-thunk 有它的局限性。当需要进行复杂的异步操作 (如需监听多个 action)，或需要非阻塞的流程控制 (如请求开始后，需要在中途取消请求) 时，Redux-thunk 就难以胜任。此时就需要使用 Redux-saga。
Redux-saga
Redux-saga 是一个使用了 ES6 的 Generator 功能的库，能够管理复杂的异步操作，包括但不限于：API 调用、WebSocket 连接、订阅外部事件等。它可以让异步操作变得更简单和直观，并且解决并发和取消异步请求等问题。
下面是一个简单的示例，展示如何使用 Redux-saga 异步获取数据，并将数据 dispatch 到 store 中：
------ - ---------------- ----------- - ---- --------
------ -------------------- ---- -------------
------ - ----- ---- --------- - ---- ---------------------
----- ------------ - -
----- -----
---------- ------
--
-- ------ -----
----- ------------ - ---------------
----- ------------ - ---------------
-- ------ --------
----- ----------- - -- -- -- ----- ------------ ---
----- ----------- - ------ -- -- ----- ------------- ---- ---
-- -------
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------
------ - --------- ---------- ---- --
---- -------------
------ - --------- ---------- ------ ----- ----------- --
--------
------ ------
-
--
-- ----- --------
--------- ----------- -
----- -------------------
----- ---- - ----- ------- -- ---------------------------------------------- -- -------------
----- -----------------------
-
-- ---- ----
--------- ---------- -
----- ----------------------- -----------
-
-- ------ ---- ----------
----- -------------- - -----------------------
-- ------ -----
----- ----- - -------------------- ---------------------------------
-- --- ---- ----
-----------------------------
-- -------- ----- ------
---------------- ----- ------------ ---在上面的例子中，我们创建了一个名为 fetchData 的 generator 函数，通过在函数中的 yield 关键字来控制异步操作的顺序，使用 put 和 call 函数来派发 action 和异步调用 API。
虽然 Redux-saga 需要在使用前学习 generator 函数及相关特性，但是当需要处理复杂的异步流程、取消请求或者需要使用一些高级功能时，Redux-saga 是更好的选择。
结论及建议
总体来说，Redux-thunk 更适合处理简单的异步请求，而 Redux-saga 更适合处理复杂的异步流程，并能管理和控制异步操作的执行。当然，使用哪个中间件还要根据具体的场景而定，需要根据实际情况进行权衡。
在实际项目中，我们可以根据需要混合使用两种中间件，例如对于业务逻辑不太复杂的模块，我们可以使用 Redux-thunk；对于需要处理复杂逻辑的模块，我们可以使用 Redux-saga。
无论使用哪个中间件，我们都需要了解其原理和使用方法。同时，我们也需要尽可能避免过度使用异步操作，因为它会增加代码的复杂度，并在某些情况下会影响程序的性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671c63e99babaf620fb09156