使用ApiService将redux工具包方法createAsyncThunk与Angular HttpClient集成

// api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) {}

  fetchData(url: string): Promise<any> {
    return this.http.get(url).toPromise();
  }
}

// data.slice.ts
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { RootState } from './store';
import { ApiService } from './api.service';

const apiService = new ApiService();

export const fetchData = createAsyncThunk(
  'data/fetchData',
  async (url: string) => {
    const response = await apiService.fetchData(url);
    return response.data;
  }
);

export const dataSlice = createSlice({
  name: 'data',
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export const selectData = (state: RootState) => state.data.data;
export const selectLoading = (state: RootState) => state.data.loading;
export const selectError = (state: RootState) => state.data.error;

// component.ts
import { useDispatch, useSelector } from 'react-redux';
import { fetchData, selectData, selectLoading, selectError } from './data.slice';

export const Component = () => {
  const dispatch = useDispatch();
  const data = useSelector(selectData);
  const loading = useSelector(selectLoading);
  const error = useSelector(selectError);

  useEffect(() => {
    dispatch(fetchData('https://api.example.com/data'));
  }, [dispatch]);

  if (loading) {
    return <div>Loading...</div>;
  }

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

  return <div>Data: {data}</div>;
};