React.js -使用带有上下文和reducer的axios

import React, { createContext, useContext, useReducer, useEffect } from 'react';
import axios from 'axios';

// 创建上下文
const DataContext = createContext();

// 初始状态
const initialState = {
  data: [],
  loading: true,
  error: null,
};

// Reducer 函数
const dataReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_SUCCESS':
      return { ...state, data: action.payload, loading: false };
    case 'FETCH_ERROR':
      return { ...state, error: action.payload, loading: false };
    default:
      return state;
  }
};

// 数据提供者组件
const DataProvider = ({ children }) => {
  const [state, dispatch] = useReducer(dataReducer, initialState);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_ERROR', payload: error.message });
      });
  }, []);

  return (
    <DataContext.Provider value={state}>
      {children}
    </DataContext.Provider>
  );
};

// 使用上下文和 reducer 的组件
const DataDisplay = () => {
  const { data, loading, error } = useContext(DataContext);

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

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

// 应用入口
const App = () => {
  return (
    <DataProvider>
      <DataDisplay />
    </DataProvider>
  );
};

export default App;