如何在 redux 中发出 AJAX 请求

在 Redux 中发出 AJAX 请求，通常不会直接在 Redux 的 action creators 中进行。相反，你会使用中间件来处理异步逻辑，最常见的是使用 redux-thunk 中间件。下面是一个使用 redux-thunk 和 fetch API 发出 AJAX 请求的基本示例：

1. 安装 redux-thunk:

sh
npm install redux-thunk

1. 配置 Store 以使用 redux-thunk 中间件:

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

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

1. 创建 Action Creators:

javascript
// 同步 action，用于请求开始时
const fetchDataRequest = () => ({
  type: 'FETCH_DATA_REQUEST'
});

// 同步 action，用于请求成功时
const fetchDataSuccess = (data) => ({
  type: 'FETCH_DATA_SUCCESS',
  payload: data
});

// 同步 action，用于请求失败时
const fetchDataFailure = (error) => ({
  type: 'FETCH_DATA_FAILURE',
  payload: error
});

// 异步 action creator，使用 thunk 中间件
const fetchData = (url) => {
  return (dispatch) => {
    dispatch(fetchDataRequest());
    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error(`Error status: ${response.status}`);
        }
        return response.json();
      })
      .then(json => {
        dispatch(fetchDataSuccess(json));
      })
      .catch(error => {
        dispatch(fetchDataFailure(error.message));
      });
  };
};

1. 在组件中使用异步 action:

javascript
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data);
  const isLoading = useSelector(state => state.isLoading);
  const error = useSelector(state => state.error);

  useEffect(() => {
    dispatch(fetchData('https://api.example.com/data'));
  }, [dispatch]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
};

export default MyComponent;

1. 处理 Actions 的 Reducer:

javascript
const initialState = {
  isLoading: false,
  data: [],
  error: null
};

const dataReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'FETCH_DATA_REQUEST':
      return {
        ...state,
        isLoading: true
      };
    case 'FETCH_DATA_SUCCESS':
      return {
        ...state,
        isLoading: false,
        data: action.payload
      };
    case 'FETCH_DATA_FAILURE':
      return {
        ...state,
        isLoading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

export default dataReducer;

这是一个简单的 Redux 异步流程例子。在真实的应用中，你可能需要更复杂的错误处理、状态更新或者使用其他中间件和库（例如 redux-saga、axios 等）。此外，Redux Toolkit 简化了很多 Redux 的设置步骤，包括配置 store 和编写 reducers/action creators，你可能想考虑使用 Redux Toolkit 来进一步简化你的代码。