在使用 Redux 进行异步请求时,我们通常会使用 Axios 库来发送网络请求。在 Redux Action 中使用 Axios 库发送异步请求时,需要采用 Redux Thunk 或 Redux Saga 等中间件来处理异步 Action。代码如下所示:
import axios from 'axios';
// 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 });
// Async Action Creator
const fetchData = () => {
return async dispatch => {
dispatch(fetchDataRequest());
try {
const response = await axios.get('url/to/api');
dispatch(fetchDataSuccess(response.data));
} catch (error) {
dispatch(fetchDataFailure(error.message));
}
}
}
// Reducer
const initialState = {
data: [],
error: null,
loading: false
};
const dataReducer = (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 };
case FETCH_DATA_FAILURE:
return { ...state, loading: false, error: action.payload };
default:
return state;
}
}
export { fetchData, dataReducer };
import axios from 'axios';
import { put, call, takeLatest } from 'redux-saga/effects';
// 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 });
// Sagas
function* fetchDataSaga() {
yield put(fetchDataRequest());
try {
const response = yield call(axios.get, 'url/to/api');
yield put(fetchDataSuccess(response.data));
} catch (error) {
yield put(fetchDataFailure(error.message));
}
}
function* watchFetchData() {
yield takeLatest(FETCH_DATA_REQUEST, fetchDataSaga