如何在Reducer React Typescript中设置条件有效负载

interface AppState {
  isLoading: boolean;
  data: any;
  error: string | null;
}

const initialState: AppState = {
  isLoading: false,
  data: null,
  error: null,
};

enum ActionTypes {
  FETCH_DATA_REQUEST = "FETCH_DATA_REQUEST",
  FETCH_DATA_SUCCESS = "FETCH_DATA_SUCCESS",
  FETCH_DATA_FAILURE = "FETCH_DATA_FAILURE",
}

interface FetchDataRequestAction {
  type: ActionTypes.FETCH_DATA_REQUEST;
}

interface FetchDataSuccessAction {
  type: ActionTypes.FETCH_DATA_SUCCESS;
  payload: any;
}

interface FetchDataFailureAction {
  type: ActionTypes.FETCH_DATA_FAILURE;
  payload: string;
}

type Action = FetchDataRequestAction | FetchDataSuccessAction | FetchDataFailureAction;

const reducer = (state: AppState, action: Action): AppState => {
  switch (action.type) {
    case ActionTypes.FETCH_DATA_REQUEST:
      return {
        ...state,
        isLoading: true,
        error: null,
      };
    case ActionTypes.FETCH_DATA_SUCCESS:
      return {
        ...state,
        isLoading: false,
        data: action.payload,
      };
    case ActionTypes.FETCH_DATA_FAILURE:
      return {
        ...state,
        isLoading: false,
        error: action.payload,
      };
    default:
      return state;
  }
};

const MyComponent: React.FC = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const fetchData = async () => {
    dispatch({ type: ActionTypes.FETCH_DATA_REQUEST });

    try {
      const response = await fetch("https://api.example.com/data");
      const data = await response.json();
      dispatch({ type: ActionTypes.FETCH_DATA_SUCCESS, payload: data });
    } catch (error) {
      dispatch({ type: ActionTypes.FETCH_DATA_FAILURE, payload: error.message });
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {state.isLoading ? (
        <p>Loading...</p>
      ) : state.error ? (
        <p>Error: {state.error}</p>
      ) : (
        <p>Data: {JSON.stringify(state.data)}</p>
      )}
    </div>
  );
};