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

export const getIngredientsApi = () => fetch(`${URL}/ingredients`) .then((res) => checkResponse<TIngredientsResponse>(res)) .then((data) => { if (data?.success) return data.data; return Promise.reject(data); }); Нужно написать slice в файле слайса создайте асинхронную Thunk-функцию, которая будет использовать нужный метод API и запрашивать данные с сервера. Непосредственно в самом компоненте используйте эту Thunk-функцию для получения самих данных. Не забудьте, что теперь данные получаются и сохраняются в store, поэтому, чтобы отобразить их на экране, используйте селекторы. Обратите внимание, что для хорошего UX стоило бы использовать лоадеры в те моменты, когда мы отправили запрос и ждём ответ от сервера. Поэтому не забудьте в экшен и редюсер добавить нужный функционал. import { createSlice, createAsyncThunk, PayloadAction, nanoid, createSelector } from '@reduxjs/toolkit'; import { TIngredient } from '@utils-types'; import { getIngredientsApi } from '../../utils/burger-api'; type TIngredientState = { ingredients: TIngredient[]; loading: boolean; error?: string | null } const initialState: TIngredientState = { ingredients: [], loading: false, error: '' } export const fetchIngredients = createAsyncThunk<TIngredient[]>( 'ingredients/fetchIngredients', async () => { const response = await getIngredientsApi(); return response; } ); const ingredientSlice = createSlice({ name: 'burgerIngredients', initialState, reducers: {}, selectors: { }, extraReducers: (builder) => { builder } }); export const ingredientSliceReducer = ingredientSlice.reducer; export const {getIngredients} = ingredientSlice.selectors;