解决 Redux 中异步 action 的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

在 Redux 中，异步 action 的处理一直是一个比较棘手的问题。在实际开发中，我们经常需要使用异步请求来获取数据，然后再将数据保存到 Redux 的 store 中。本文将介绍 Redux 中异步 action 的最佳实践，帮助开发者更好地处理异步请求。

为什么需要异步 action

在 Redux 中，每个 action 都是同步的。这意味着当我们 dispatch 一个 action 时，Redux 会立即更新 store 中的状态。但是，在实际开发中，我们经常需要使用异步请求来获取数据，然后再将数据保存到 store 中。如果我们使用同步 action 来处理异步请求，那么我们就需要在 action 中等待异步请求的结果返回，这样会导致应用程序的响应速度变慢。

因此，Redux 提供了一种处理异步请求的机制，即异步 action。异步 action 是指一个 action 中包含了异步请求的处理逻辑，当异步请求完成后，再 dispatch 一个新的 action 更新 store 中的状态。

使用 Redux Thunk 处理异步 action

Redux Thunk 是处理异步 action 的最佳实践之一。Thunk 是一个函数，它可以延迟计算或执行。在 Redux 中，Thunk 是指一个返回函数的 action creator。

使用 Redux Thunk 处理异步 action 的基本步骤如下：

创建一个 action creator，返回一个函数，该函数接受 dispatch 和 getState 两个参数。
在函数中执行异步请求，并在请求完成后 dispatch 一个新的 action。
在 reducer 中处理新的 action，更新 store 中的状态。

下面是一个使用 Redux Thunk 处理异步 action 的示例代码：

// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import axios from 'axios';

const initialState = {
  loading: false,
  data: [],
  error: null,
};

const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

const fetchDataRequest = () => {
  return {
    type: FETCH_DATA_REQUEST,
  };
};

const fetchDataSuccess = (data) => {
  return {
    type: FETCH_DATA_SUCCESS,
    payload: data,
  };
};

const fetchDataFailure = (error) => {
  return {
    type: FETCH_DATA_FAILURE,
    payload: error,
  };
};

const fetchData = () => {
  return (dispatch, getState) => {
    dispatch(fetchDataRequest());
    axios.get('/api/data')
      .then((response) => {
        const data = response.data;
        dispatch(fetchDataSuccess(data));
      })
      .catch((error) => {
        dispatch(fetchDataFailure(error));
      });
  };
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_DATA_REQUEST:
      return {
        ...state,
        loading: true,
      };
    case FETCH_DATA_SUCCESS:
      return {
        ...state,
        loading: false,
        data: action.payload,
        error: null,
      };
    case FETCH_DATA_FAILURE:
      return {
        ...state,
        loading: false,
        data: [],
        error: action.payload,
      };
    default:
      return state;
  }
};

const store = createStore(reducer, applyMiddleware(thunk));

store.dispatch(fetchData());

在上面的代码中，我们首先定义了三个 action creator：fetchDataRequest、fetchDataSuccess 和 fetchDataFailure。然后，我们定义了一个名为 fetchData 的异步 action creator，它返回一个函数。在 fetchData 函数中，我们首先 dispatch 了一个 FETCH_DATA_REQUEST action，表示数据正在加载中。然后，我们使用 axios 库发送异步请求，如果请求成功，我们 dispatch 一个 FETCH_DATA_SUCCESS action，并将返回的数据作为 payload 传递给该 action。如果请求失败，我们 dispatch 一个 FETCH_DATA_FAILURE action，并将错误信息作为 payload 传递给该 action。

最后，我们定义了一个 reducer 函数，用于处理三种不同类型的 action，并更新 store 中的状态。我们使用 createStore 函数创建了一个 Redux store，并将 thunk 中间件应用到该 store 中。最后，我们 dispatch 了一个 fetchData action，开始加载数据。

总结

使用 Redux Thunk 处理异步 action 是 Redux 中处理异步请求的最佳实践之一。在 Redux Thunk 中，我们可以使用一个返回函数的 action creator 来处理异步请求，并在请求完成后 dispatch 一个新的 action 更新 store 中的状态。在实际开发中，我们应该尽可能地使用 Redux Thunk 处理异步请求，以保证应用程序的响应速度和可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655db898d2f5e1655d7fefb2