如何等待fetch，直到redux状态可用？

// actionTypes.js

export const FETCH_DATA = 'FETCH_DATA';
export const UPDATE_DATA = 'UPDATE_DATA';

// actions.js

import { FETCH_DATA, UPDATE_DATA } from './actionTypes';

export const fetchData = () => {
  return async (dispatch) => {
    // 请求数据前可以进行一些初始化操作，例如展示加载中的状态
    dispatch({ type: FETCH_DATA });

    try {
      // 使用fetch请求数据
      const response = await fetch('https://example.com/data');
      const data = await response.json();

      // 数据获取成功后更新Redux状态
      dispatch({ type: UPDATE_DATA, payload: data });
    } catch (error) {
      // 数据获取失败后可以进行一些错误处理操作
      console.error('Error fetching data:', error);
    }
  };
};

// reducer.js

import { FETCH_DATA, UPDATE_DATA } from './actionTypes';

const initialState = {
  loading: false,
  data: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_DATA:
      return { ...state, loading: true };
    case UPDATE_DATA:
      return { ...state, loading: false, data: action.payload };
    default:
      return state;
  }
};

export default reducer;

// YourComponent.js

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

const YourComponent = ({ loading, data, fetchData }) => {
  useEffect(() => {
    // 组件加载后触发数据获取
    fetchData();
  }, [fetchData]);

  // 渲染界面根据loading和data状态展示不同的内容
  if (loading) {
    return <div>Loading...</div>;
  }

  if (!data) {
    return <div>No data available.</div>;
  }

  return (
    <div>
      {/* 根据获取到的data展示内容 */}
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

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

const mapDispatchToProps = {
  fetchData,
};

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