Redux 是一个流行的 JavaScript 应用程序状态管理库。 Redux 常用于 React 应用程序的状态管理。 Redux 模式将应用程序状态储存在单个对象中。 组件从该对象中获取状态并从组件发送操作更新该状态。 通过使用 Redux，能够在应用程序中实现可预测性和可维护性。
在 Redux 中，异步代码通常定义为 thunk 函数，并使用 redux-thunk 中间件处理。但对于一些更为复杂的场景，redux-saga 也是一种很好的选择。这篇文章将比较两者的异同。
redux-thunk
定义
redux-thunk 是 Redux 的中间件之一，它允许在 Redux 的 action 中进行异步操作。当 action 是一个函数而不是一个对象时，redux-thunk 中间件会拦截这个 action，调用该函数，并且传递 dispatch 函数作为参数。 由于中间件的存在，这个函数不必是纯函数，可以进行异步操作。这个 action 函数可以调用多个其他的 action 和更新状态。
示例
function fetchData() {
return dispatch => {
return fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => dispatch({ type: 'FETCH_DATA', data: json }));
};
}上面的代码示例定义了一个名为 fetchData 的函数，它返回一个需要 dispatch 和返回一个 promise 的函数。
该函数使用 JavaScript 的 fetch() 方法，发出 GET 请求并将其解析为 JSON 对象。 JSON 对象被调度为 Redux action，使用 dispatch() 方法将其发送到 Redux store 中。
如果要使用该函数，可以将其添加到组件中的 mapDispatchToProps 函数中。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- ---------------- ------- --------------- -
------------------- -
-----------------------
-
-------- ------ --- ----- ---- ----
-
----- ------------------ - -
---------
--
------ ------- ------------- --------------------------------------在雷达图数据加载完成后，组件可以使用状态中的数据来更新自身，从而显示雷达图数据。
redux-saga
定义
Redux-saga 是 Redux 的另一个中间件，它使用 ES6 中生成器函数和 yield 关键字，能够更容易地管理和测试处理异步操作。
注意: 了解 ES6 的生成器函数.
示例
下面是一个使用 redux-saga 的异步示例代码：
-- -------------------- ---- -------
------ - ----------- ----- --- - ---- ---------------------
--------- ----------- -
--- -
----- -------- - ----- ----------- ------------------------------------------------
----- ---- - ----- ----------------
----- ----- ----- --------------------- ---- ---
- ----- --- -
----- ----- ----- --------------------- -------- --------- ---
-
-
------ ------- --------- ---------- -
----- ------------------------ -----------
-在这个示例中，我们使用 takeLatest，我们只会处理具有特定 type 的最新 action。 在这种情况下，我们只对类型为 FETCH_DATA 的最后一个 action 进行操作。
fetchData 实际上是一个生成函数，可以看到它使用 yield 调用了很多方法。 易错的地方是与 redux-thunk 不一样，这些 yield 方法并不会直接同步执行。 redux-saga 使用了 ES6 的生成器函数，每次 yield 函数时，它会在其中暂停当前函数，并将控制权交给调用方。这使得 redux-saga 能够更好的处理高级异步行为，例如轮询，取消，等待使用。
在上面的代码中，首先我们调用 fetch 函数，使用 call： const response = yield call(fetch, 'https://jsonplaceholder.typicode.com/todos/1');
接下来，我们使用 yield put({ type: 'FETCH_DATA_SUCCESS', data }); 进行 Redux 的 action 分发
如果发生错误，我们调用 yield put({ type: 'FETCH_DATA_FAILURE', message: e.message }); 进行 Redux 的 action 分发
最后，我们将 rootSaga 与你的 Redux 应用程序集成：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ ----------- ---- ------------------- ------ -------- ---- ---------------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ ------------------------------- -- ----------------------------- ------ ------- ------
上述代码中，sagaMiddleware 是一个 redux-saga 实例，它会对 saga 进行拦截并运行中间件。
异同比较
redux-thunk 和 redux-saga 在处理 Redux 官方推荐的异步 action 中都有不错的表现，它们的一个主要区别在于它们执行异步操作的方式。
redux-saga 更适合于处理大量高级异步操作，如取消和轮询等等。 而 redux-thunk 主要是用于处理一些简单异步操作，由于它们在代码中的表现方式相对更简单和具有可预测性，因此是 Redux 更流行的方式。 在代码质量和性能之间，选择合适的异步处理方式往往是一个挑战。在一些较为简单的异步处理中，可以使用 redux-thunk 以更简单的方式处理。但对于更具有复杂性的异步行为，使用 redux-saga 会更方便和可扩展。
总结
无论是 redux-thunk 还是 redux-saga， Redux 中实现异步操作都是成功的。在选择使用哪个方案时，请根据你需要实现的异步行为类型以及团队的经验进行决策。只要记住，redux-thunk 一般使用于简单操作，redux-saga 则适合处理较为复杂和高级的异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb17835ad90b6d041ec028