初始化 Axios React Redux CRUD API 调用

在 React 项目中，使用 Axios 发送网络请求是常见的操作，配合 Redux 状态管理可以实现更灵活的数据流管理。本文将介绍如何初始化 Axios，并结合 React 和 Redux 进行 CRUD API 调用，以实现前端与后台的数据交互。

初始化 Axios

Axios 是一个基于 Promise 的 HTTP 库，可以发送异步请求，支持浏览器和 Node.js。在 React 项目中，我们可以将 Axios 封装成一个模块，方便在整个项目中使用。具体操作如下：

1. 安装 Axios：

npm install --save axios

2. 创建 axios.js 文件，并将以下代码放入其中：

import axios from 'axios';

/**
 * 创建 Axios 实例
 */
const instance = axios.create({
  baseURL: process.env.REACT_APP_BASE_API, // 根据环境变量设置 base URL
  timeout: 5000, // 超时时间
});

// 拦截器，统一处理请求和响应
// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default instance;

这里我们使用了 Axios 的拦截器功能，可以在发送请求和响应时进行一些公共操作，例如添加 token 头、处理错误信息等。

3. 在需要发送请求的地方，引入 axios.js，并使用 Axios 发送请求：

import axios from './axios';

/**
 * 获取用户列表
 * @returns {Promise<any>}
 */
export function getUsers() {
  return axios.get('/users');
}

/**
 * 新增用户
 * @param user
 * @returns {Promise<any>}
 */
export function addUser(user) {
  return axios.post('/users', user);
}

/**
 * 更新用户
 * @param user
 * @returns {Promise<any>}
 */
export function updateUser(user) {
  return axios.put(`/users/${user.id}`, user);
}

/**
 * 删除用户
 * @param id
 * @returns {Promise<any>}
 */
export function deleteUser(id) {
  return axios.delete(`/users/${id}`);
}

Redux 集成

接下来，我们将结合 Redux 实现 CRUD API 调用的全流程。以获取用户列表为例，具体操作如下：

1. 在 src 目录下创建 store 目录，并分别创建 index.js 、actions.js、reducers.js 文件。

2. 在 index.js 中，创建 Redux Store，并引入 thunk 和 logger 中间件。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';

// 创建 Store
const store = createStore(
  rootReducer,
  applyMiddleware(thunk, logger)
);

export default store;

3. 在 actions.js 中，创建 action 和异步 action，发送请求并将数据保存到 Redux Store 中。

import { getUsers } from '../../api';
export const GET_USERS = 'GET_USERS';

/**
 * 获取用户列表（同步 action）
 */
function getUsersSuccess(data) {
  return {
    type: GET_USERS,
    data,
  };
}

/**
 * 获取用户列表（异步 action）
 */
export function fetchUsers() {
  return async dispatch => {
    const data = await getUsers();
    dispatch(getUsersSuccess(data));
  };
}

4. 在 reducers.js 中，处理 action 并更新 Redux Store。

import { combineReducers } from 'redux';
import { GET_USERS } from './actions';

/**
 * 用户列表 reducer
 */
function users(state = [], action) {
  switch (action.type) {
    case GET_USERS:
      return action.data;
    default:
      return state;
  }
}

/**
 * 合并 reducer
 */
const rootReducer = combineReducers({
  users,
});

export default rootReducer;

5. 在组件中通过 connect 函数将 Redux Store 和 action 绑定起来，并使用 dispatch 函数触发异步 action 进行 API 调用。

import { connect } from 'react-redux';
import { fetchUsers } from '../../../store/actions';

class UserList extends Component {
  componentDidMount() {
    this.props.fetchUsers();
  }

  render() {
    const { users } = this.props;
    // ...
  }
}

function mapStateToProps(state) {
  return {
    users: state.users,
  };
}

const mapDispatchToProps = {
  fetchUsers,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserList);

到这里，我们就可以使用 Redux 和 Axios 流畅地进行 CRUD API 调用了。除了获取列表数据外，更新、删除、新增等操作均可按照相同的套路实现。

总结

本文介绍了如何在 React 项目中初始化 Axios 并结合 Redux 进行 CRUD API 调用。通过封装 Axios 成为一个模块，我们可以统一处理请求和响应，在组件中使用 dispatch 函数触发异步 action，形成完整的数据流模式，提高代码复用率并方便维护。