Redux 是一种状态管理库，它可以让我们更好地管理应用程序的状态。但是，在实际开发中，我们通常需要向服务器发起异步请求来获取数据，这时候就需要对 Redux 进行一些处理。本文将介绍如何在 Redux 中调用异步请求，并介绍一些优化技巧，以使我们的 Redux 应用更加高效。
Redux 异步请求的处理
Redux 本身并不支持异步请求，因此我们需要使用一些中间件来实现这一功能。常用的中间件有 redux-thunk 和 redux-saga，它们都可以让我们在 Redux 中调用异步请求。
redux-thunk
redux-thunk 是 Redux 官方推荐的中间件之一，它允许我们在 Redux 中编写异步的 action。具体来说，它允许我们在 action 中返回一个函数，而不仅仅是一个对象。
-- -------------------- ---- ------- -- -- ------ --- ------ ----- ---------- - -- -- - ------ -------- -- - ------------------------ ------ ------------------- -------------- -- ---------------- ---------- -- ----------------------------- - -展开代码
上面的代码中，fetchPosts 是一个异步 action，它返回一个函数，而不是一个对象。这个函数接受一个 dispatch 参数，我们可以在这个函数中发起异步请求，并在请求完成后通过 dispatch 发送一个同步 action。
redux-saga
redux-saga 是另一个常用的中间件，它使用了 ES6 的 generator 函数来处理异步请求。相比于 redux-thunk，它的代码更加清晰易懂，并且可以处理更加复杂的异步流程。
-- -------------------- ---- ------- -- -- ---------- ------ --------- ------------ - --- - ----- ------------------- ----- -------- - ----- ----------- ------------- ----- ---- - ----- --------------- --------------- ----- ----------------------- - ----- ------- - ----- -------------------------------------- - -展开代码
上面的代码中，fetchPosts 是一个 generator 函数，它使用了 yield 关键字来处理异步请求。具体来说，它先发送一个同步 action，然后使用 call 函数发起异步请求，最后再发送一个同步 action。
Redux 异步请求的优化
在实际开发中，我们需要考虑一些优化技巧，以使我们的 Redux 应用更加高效。下面介绍一些常用的优化技巧。
使用缓存
如果我们的数据是不经常变化的，那么我们可以使用缓存来减少网络请求。具体来说，我们可以在 Redux 中存储数据的缓存，并在发起请求之前先检查缓存中是否已经有了数据。
-- -------------------- ---- ------- -- ---- ------ ----- ------------------ - -- -- - ------ ---------- --------- -- - -- ------------------------------ - ------ ---------------------- - - - ----- ---------------- - ----- -- - ----- ----- - ----------- -- -------------- - ------ ---- - -- ------------------ - ------ ----- - ------ ------------------- -展开代码
上面的代码中，fetchPostsIfNeeded 函数会检查 Redux 中的缓存，如果数据已经存在并且没有过期，那么就不会发起新的网络请求。
合并请求
如果我们需要同时发起多个异步请求，那么我们可以使用 Promise.all 来合并这些请求。具体来说，我们可以将多个异步请求封装成一个 Promise，然后使用 Promise.all 来等待这些请求完成。
-- -------------------- ---- ------- -- ---- ------ ----- --------------------- - -- -- - ------ -------- -- - ------------- ----------------------- ------------------------- ---------- -- - ---------------- -------- --- ------ -- - -展开代码
上面的代码中，fetchPostsAndComments 函数会同时发起两个异步请求，并在这两个请求都完成后输出一条日志。
结语
本文介绍了如何在 Redux 中调用异步请求，并介绍了一些优化技巧。如果我们能够正确地使用这些技巧，那么我们的 Redux 应用将会更加高效、稳定和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d55763a941bf71349e3b5b
