通过Redux (Action & Reducer)从服务器获取数据时，无法将数据存储在状态中

// 异步Action
const fetchDataSuccess = (data) => {
  return {
    type: 'FETCH_DATA_SUCCESS',
    payload: data
  };
};

const fetchData = () => {
  return (dispatch) => {
    // 发起API请求获取数据
    fetch('https://example.com/api/data')
      .then(response => response.json())
      .then(data => {
        // 请求成功后将数据传递给Reducer
        dispatch(fetchDataSuccess(data));
      })
      .catch(error => {
        // 处理错误
        console.error('Error:', error);
      });
  };
};

// Reducer
const initialState = {
  data: null
};

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

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

const MyComponent = ({ data, fetchData }) => {
  useEffect(() => {
    // 组件挂载时获取数据
    fetchData();
  }, []);

  return (
    <div>
      {data && <p>{data}</p>}
    </div>
  );
};

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

const mapDispatchToProps = {
  fetchData
};

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