Redux -thunk 内如何使用 axios / AJAX ？

Axios

7 个月前提问

5 个月前修改

浏览次数42次

2个答案

当然，我可以解释Redux-thunk中如何使用axios进行AJAX请求。

Redux-thunk是一个中间件，允许我们在Redux中编写返回函数的action creators，而不是仅仅返回action对象。这样的函数可以在dispatch action之前执行异步操作，如API调用。

在使用axios进行AJAX请求时，通常的步骤如下：

安装和引入所需的库： 首先需要在项目中安装redux, react-redux, redux-thunk和axios。

bash
npm install redux react-redux redux-thunk axios

然后在你的项目文件中引入它们：

javascript
import axios from 'axios';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';

创建异步的action creator： 使用redux-thunk，我们可以创建返回函数的action creator。在这个函数内部，我们可以调用axios来执行AJAX请求。

javascript
// Action Types
const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

// Action Creators
const fetchDataRequest = () => ({
  type: FETCH_DATA_REQUEST,
});

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

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

// Thunk Action Creator
const fetchData = () => {
  return (dispatch) => {
    dispatch(fetchDataRequest());
    axios.get('/my-api-endpoint')
      .then(response => {
        // response.data is the data you get from the API
        dispatch(fetchDataSuccess(response.data));
      })
      .catch(error => {
        // error.message is the error message
        dispatch(fetchDataFailure(error.message));
      });
  };
};

配置store： 在你的store配置中，你需要应用thunk中间件。

javascript
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

在React组件中使用异步action： 在React组件中，你可以dispatch你的异步action来触发API调用。

javascript
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchData } from './actions'; // 假设你的action creators在这个路径下

const MyComponent = () => {
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(fetchData()); // 触发API请求
  }, [dispatch]);
  
  // 渲染组件...
};

以上就是在Redux-thunk中结合axios使用的基本步骤。在你的项目中，你需要根据实际情况调整API端点和数据处理。这个例子展示了如何开始一个异步请求，在请求成功或失败时dispatch不同的actions来更新应用的state。

2024年6月29日 12:07 回复

在使用axios进行AJAX请求时，通常的步骤如下：

安装和引入所需的库： 首先需要在项目中安装redux, react-redux, redux-thunk和axios。

bash
npm install redux react-redux redux-thunk axios

然后在你的项目文件中引入它们：

javascript
import axios from 'axios';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';

创建异步的action creator： 使用redux-thunk，我们可以创建返回函数的action creator。在这个函数内部，我们可以调用axios来执行AJAX请求。

javascript
// Action Types
const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

// Action Creators
const fetchDataRequest = () => ({
  type: FETCH_DATA_REQUEST,
});

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

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

// Thunk Action Creator
const fetchData = () => {
  return (dispatch) => {
    dispatch(fetchDataRequest());
    axios.get('/my-api-endpoint')
      .then(response => {
        // response.data is the data you get from the API
        dispatch(fetchDataSuccess(response.data));
      })
      .catch(error => {
        // error.message is the error message
        dispatch(fetchDataFailure(error.message));
      });
  };
};

配置store： 在你的store配置中，你需要应用thunk中间件。

javascript
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

在React组件中使用异步action： 在React组件中，你可以dispatch你的异步action来触发API调用。

javascript
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchData } from './actions'; // 假设你的action creators在这个路径下

const MyComponent = () => {
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(fetchData()); // 触发API请求
  }, [dispatch]);
  
  // 渲染组件...
};

2024年6月29日 12:07 回复

Redux -thunk 内如何使用 axios / AJAX ？

2个答案

你的答案