ЯсноПонятно24

1. В файле tracksSlice.ts создайте санку fetchTracks для получения массива треков с помощью createAsyncThunk:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { getTracks } from '../api/tracksAPI';

export const fetchTracks = createAsyncThunk(
  'tracks/fetchTracks',
  async () => {
    const response = await getTracks();
    return response.data;
  }
);

const tracksSlice = createSlice({
  name: 'tracks',
  initialState: {
    tracks: [],
    loading: 'idle',
    error: null,
  },
  reducers: {
    // Добавьте здесь необходимые редюсеры
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchTracks.pending, (state) => {
        state.loading = 'loading';
      })
      .addCase(fetchTracks.fulfilled, (state, action) => {
        state.loading = 'idle';
        state.tracks = action.payload;
      })
      .addCase(fetchTracks.rejected, (state, action) => {
        state.loading = 'idle';
        state.error = action.error.message;
      });
  },
});

export default tracksSlice.reducer;

2. Вызовите созданную вами санку fetchTracks, чтобы получить массив треков:

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchTracks } from './tracksSlice';

const TracksComponent = () => {
  const dispatch = useDispatch();
  const tracks = useSelector((state) => state.tracks.tracks);
  const loading = useSelector((state) => state.tracks.loading);

  useEffect(() => {
    dispatch(fetchTracks());
  }, [dispatch]);

  return (
    <div>
      {loading === 'loading' ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {tracks.map((track) => (
            <li key={track.id}>{track.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default TracksComponent;

3. Теперь компонент TracksComponent будет отображать "Loading..." пока не выполнится запрос за массивом треков, после чего отобразит список треков.