如何使用axios在redux中获取api项？

在使用axios在redux中获取API项时，可以按照以下步骤进行：

首先，安装axios和redux-thunk库。可以使用npm或yarn进行安装：

npm install axios redux-thunk

在redux中创建一个action，用于发起API请求和更新应用状态。可以在actions文件夹中创建一个名为apiActions.js的文件，并编写以下代码：

import axios from 'axios';

export const fetchApiItem = () => {
  return (dispatch) => {
    // 请求开始前，可以通过dispatch发送一个action，用于更新应用状态，比如设置loading为true
    dispatch({ type: 'FETCH_API_ITEM_START' });
    
    // 使用axios发送请求
    axios.get('/api/item')
      .then((response) => {
        // 请求成功后，可以通过dispatch发送一个action，用于更新应用状态，比如将获取到的数据存储到state中
        dispatch({ type: 'FETCH_API_ITEM_SUCCESS', payload: response.data });
      })
      .catch((error) => {
        // 请求失败后，可以通过dispatch发送一个action，用于更新应用状态，比如将错误信息存储到state中
        dispatch({ type: 'FETCH_API_ITEM_FAILURE', payload: error.message });
      });
  };
};

在reducers中创建一个reducer，用于根据不同的action更新应用状态。可以在reducers文件夹中创建一个名为apiReducer.js的文件，并编写以下代码：

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

const apiReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'FETCH_API_ITEM_START':
      return {
        ...state,
        loading: true,
      };
      
    case 'FETCH_API_ITEM_SUCCESS':
      return {
        ...state,
        loading: false,
        data: action.payload,
        error: null,
      };
      
    case 'FETCH_API_ITEM_FAILURE':
      return {
        ...state,
        loading: false,
        data: null,
        error: action.payload,
      };
      
    default:
      return state;
  }
};

export default apiReducer;

在组件中使用redux的connect函数将action和reducer与组件连接起来，并在组件中调用action来触发API请求。可以在需要获取API项的组件中，导入fetchApiItem action和redux的connect函数，并编写以下代码：

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchApiItem } from './actions/apiActions';

const MyComponent = (props) => {
  useEffect(() => {
    // 组件挂载时，调用fetchApiItem action来触发API请求
    props.fetchApiItem();
  }, []);
  
  return (
    // 在组件中可以通过props获取应用状态，比如props.loading、props.data、props.error等
    <div>
      {props.loading && <p>Loading...</p>}
      {props.data && <p>Data: {props.data}</p>}
      {props.error && <p>Error: {props.error}</p>}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    loading: state.api.loading,
    data: state.api.data,
    error: state.api.error,
  };
};

export default connect(mapStateToProps, { fetchApiItem })(MyComponent);

通过以上步骤，可以使用axios在redux中获取API项。在组件中使用fetchApiItem action来触发API请求，通过redux将应用状态存储到state中，并在组件中根据状态的变化进行展示。请注意，以上代码仅为示例，具体实现方式可能会根据项目和需求而有所不同。

如何使用axios在redux中获取api项？

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐