Redux 调用异步请求的处理及优化-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一种状态管理库，它可以让我们更好地管理应用程序的状态。但是，在实际开发中，我们通常需要向服务器发起异步请求来获取数据，这时候就需要对 Redux 进行一些处理。本文将介绍如何在 Redux 中调用异步请求，并介绍一些优化技巧，以使我们的 Redux 应用更加高效。

Redux 异步请求的处理

Redux 本身并不支持异步请求，因此我们需要使用一些中间件来实现这一功能。常用的中间件有 redux-thunk 和 redux-saga，它们都可以让我们在 Redux 中调用异步请求。

redux-thunk

redux-thunk 是 Redux 官方推荐的中间件之一，它允许我们在 Redux 中编写异步的 action。具体来说，它允许我们在 action 中返回一个函数，而不仅仅是一个对象。

// www.javascriptcn.com code example
// 异步 action 的写法
export const fetchPosts = () => {
  return dispatch => {
    dispatch(requestPosts())
    return fetch('/api/posts')
      .then(response => response.json())
      .then(json => dispatch(receivePosts(json)))
  }
}

上面的代码中，fetchPosts 是一个异步 action，它返回一个函数，而不是一个对象。这个函数接受一个 dispatch 参数，我们可以在这个函数中发起异步请求，并在请求完成后通过 dispatch 发送一个同步 action。

redux-saga

redux-saga 是另一个常用的中间件，它使用了 ES6 的 generator 函数来处理异步请求。相比于 redux-thunk，它的代码更加清晰易懂，并且可以处理更加复杂的异步流程。

// www.javascriptcn.com code example
// 使用 redux-saga 处理异步请求
function* fetchPosts() {
  try {
    yield put(requestPosts())
    const response = yield call(fetch, '/api/posts')
    const json = yield call([response, response.json])
    yield put(receivePosts(json))
  } catch (error) {
    yield put(requestPostsFailed(error.message))
  }
}

上面的代码中，fetchPosts 是一个 generator 函数，它使用了 yield 关键字来处理异步请求。具体来说，它先发送一个同步 action，然后使用 call 函数发起异步请求，最后再发送一个同步 action。

Redux 异步请求的优化

在实际开发中，我们需要考虑一些优化技巧，以使我们的 Redux 应用更加高效。下面介绍一些常用的优化技巧。

使用缓存

如果我们的数据是不经常变化的，那么我们可以使用缓存来减少网络请求。具体来说，我们可以在 Redux 中存储数据的缓存，并在发起请求之前先检查缓存中是否已经有了数据。

// www.javascriptcn.com code example
// 使用缓存
export const fetchPostsIfNeeded = () => {
  return (dispatch, getState) => {
    if (shouldFetchPosts(getState())) {
      return dispatch(fetchPosts())
    }
  }
}

const shouldFetchPosts = state => {
  const posts = state.posts
  if (!posts.items) {
    return true
  }
  if (posts.isFetching) {
    return false
  }
  return posts.didInvalidate
}

上面的代码中，fetchPostsIfNeeded 函数会检查 Redux 中的缓存，如果数据已经存在并且没有过期，那么就不会发起新的网络请求。

合并请求

如果我们需要同时发起多个异步请求，那么我们可以使用 Promise.all 来合并这些请求。具体来说，我们可以将多个异步请求封装成一个 Promise，然后使用 Promise.all 来等待这些请求完成。

// www.javascriptcn.com code example
// 合并请求
export const fetchPostsAndComments = () => {
  return dispatch => {
    Promise.all([
      dispatch(fetchPosts()),
      dispatch(fetchComments())
    ]).then(() => {
      console.log('All requests are done')
    })
  }
}

上面的代码中，fetchPostsAndComments 函数会同时发起两个异步请求，并在这两个请求都完成后输出一条日志。

结语

本文介绍了如何在 Redux 中调用异步请求，并介绍了一些优化技巧。如果我们能够正确地使用这些技巧，那么我们的 Redux 应用将会更加高效、稳定和易于维护。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d55763a941bf71349e3b5b

Redux 调用异步请求的处理及优化