不在页面中显示API fetch响应数据- React Redux

// actions.js
import { fetchData } from 'api'; // 假设有一个fetchData函数用于API fetch请求

export const fetchApiData = () => {
  return async (dispatch) => {
    try {
      const response = await fetchData(); // 发起API fetch请求
      dispatch({ type: 'FETCH_SUCCESS', payload: response.data }); // 将响应数据保存到Redux store中
    } catch (error) {
      dispatch({ type: 'FETCH_ERROR', payload: error.message }); // 处理错误情况
    }
  };
};

// reducer.js
const initialState = {
  data: null,
  error: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_SUCCESS':
      return { ...state, data: action.payload };
    case 'FETCH_ERROR':
      return { ...state, error: action.payload };
    default:
      return state;
  }
};

export default reducer;

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

const MyComponent = ({ data, error, fetchApiData }) => {
  useEffect(() => {
    fetchApiData(); // 在组件挂载时触发API fetch请求
  }, [fetchApiData]);

  if (error) {
    return <div>Error: {error}</div>; // 处理错误情况
  }

  // 进一步处理数据，或将数据传递给其他组件

  return <div>Component content</div>;
};

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

export default connect(mapStateToProps, { fetchApiData })(MyComponent);