使用axios返回多个值的Redux Thunk操作

npm install axios redux-thunk

import axios from 'axios';

// 定义异步action creator
export const fetchData = () => {
  return (dispatch) => {
    // 发送异步请求
    axios.get('https://api.example.com/data')
      .then(response => {
        // 请求成功后，将结果存储到Redux的store中
        dispatch({
          type: 'FETCH_DATA_SUCCESS',
          payload: response.data
        });
      })
      .catch(error => {
        // 请求失败时，可以进行错误处理
        dispatch({
          type: 'FETCH_DATA_FAILURE',
          payload: error.message
        });
      });
  };
};

// 定义reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_SUCCESS':
      return {
        ...state,
        data: action.payload
      };
    case 'FETCH_DATA_FAILURE':
      return {
        ...state,
        error: action.payload
      };
    default:
      return state;
  }
};

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

const App = ({ data, error, fetchData }) => {
  useEffect(() => {
    // 在组件挂载时调用异步action creator
    fetchData();
  }, []);

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

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

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

const mapDispatchToProps = {
  fetchData
};

export default connect(mapStateToProps, mapDispatchToProps)(App);