前后端分离应用中 Redux-Axios 的使用和源码揭秘

随着前后端分离的应用越来越普及，如何管理前端应用中的状态成为了一个重要的问题。Redux 是一个流行的状态管理库，它提供了一种可预测的状态管理方式，但是它并不能直接处理异步请求。为了解决这个问题，Redux-Axios 库应运而生。本文将介绍 Redux-Axios 的使用和源码揭秘。

Redux-Axios 的使用

Redux-Axios 是一个基于 Axios 的 Redux 中间件，它可以让我们在 Redux 中使用 Axios 发送异步请求，并将请求的结果以 action 的形式传递给 Redux。下面是一个简单的示例代码：

// javascriptcn.com 代码示例
import axios from 'axios';
import { createAction } from 'redux-actions';
import { createAsyncThunk } from 'redux-thunk';

export const fetchUser = createAsyncThunk(
  'user/fetch',
  async (userId) => {
    const response = await axios.get(`/api/users/${userId}`);
    return response.data;
  }
);

const userReducer = createReducer(
  { data: null },
  {
    [fetchUser.fulfilled]: (state, action) => {
      state.data = action.payload;
    },
  }
);

上面的代码中，我们使用了 Redux Toolkit 提供的 createAsyncThunk 函数来创建一个异步 action，它会自动派发三个 action：pending、fulfilled 和 rejected，分别表示异步请求开始、成功和失败。我们可以使用 createReducer 函数来创建 reducer，它会自动处理这些 action。在上面的代码中，我们在 fulfilled action 中更新了用户的数据。

Redux-Axios 的源码揭秘

Redux-Axios 的源码非常简单，它只有几十行代码。下面是它的核心代码：

// javascriptcn.com 代码示例
export default function createAxiosMiddleware(axiosInstance) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, axiosInstance);
    }

    const { axios, types, ...rest } = action;
    if (!axios) {
      return next(action);
    }

    const [REQUEST, SUCCESS, FAILURE] = types;
    next({ ...rest, type: REQUEST });

    return axios(axiosInstance)
      .then(response => next({ ...rest, response, type: SUCCESS }))
      .catch(error => next({ ...rest, error, type: FAILURE }));
  };
}

这个函数接受一个 Axios 实例作为参数，返回一个 Redux 中间件函数。当一个 action 被派发时，这个中间件会判断它是否包含 axios 属性，如果包含就发送异步请求，并将请求结果以 action 的形式传递给 Redux。这个中间件还支持派发函数类型的 action，它可以让我们在 action 中访问 Redux 的状态和发送异步请求。

总结

Redux-Axios 是一个非常实用的 Redux 中间件，它可以让我们在 Redux 中处理异步请求。在使用 Redux-Axios 时，我们可以使用 Redux Toolkit 提供的 createAsyncThunk 函数来创建异步 action，它会自动派发三个 action。Redux-Axios 的源码非常简单，它只有几十行代码，但它的实现思路非常巧妙。希望本文能够对读者有所帮助。

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