есть ли в коде ошибки: import { createSlice, createAsyncThunk, PayloadAction, nanoid } from '@reduxjs/toolkit'; import { TIngredient } from '@utils-types'; import { getIngredientsApi } fro

Вопрос пользователя:

есть ли в коде ошибки: import { createSlice, createAsyncThunk, PayloadAction, nanoid } 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: { getIngredients: (state) => state.ingredients, }, extraReducers: (builder) => { builder .addCase(fetchIngredients.pending, (state) => { state.loading = true; }) .addCase(fetchIngredients.fulfilled, (state, action: PayloadAction<TIngredient[]>) => { state.ingredients = action.payload; state.loading = false; }) .addCase(fetchIngredients.rejected, (state) => { state.error = 'Ошибка при получении данных'; state.loading = false; }); } }); export const ingredientSliceReducer = ingredientSlice.reducer; export const {getIngredients} = ingredientSlice.selectors;

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

Да, в коде есть ошибка. Ошибка заключается в том, что в объекте createSlice не существует свойства "selectors". Вместо этого нужно использовать свойство "extraReducers" для определения дополнительных селекторов.

Исправленный код будет выглядеть следующим образом:

const ingredientSlice = createSlice({
    name: 'burgerIngredients',
    initialState,
    reducers: {},

    extraReducers: (builder) => {
      builder
        .addCase(fetchIngredients.pending, (state) => {
          state.loading = true;
        })
        .addCase(fetchIngredients.fulfilled, (state, action: PayloadAction<TIngredient[]>) => {
          state.ingredients = action.payload;
          state.loading = false;
        })
        .addCase(fetchIngredients.rejected, (state) => {
          state.error = 'Ошибка при получении данных';
          state.loading = false;
        });
    }
});

export const ingredientSliceReducer = ingredientSlice.reducer;
export const { getIngredients } = ingredientSlice.actions;

Теперь селектор "getIngredients" будет доступен через свойство "actions" объекта ingredientSlice.

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

const ingredientSlice = createSlice({
    name: 'burgerIngredients',
    initialState,
    reducers: {},

    extraReducers: (builder) => {
      builder
        .addCase(fetchIngredients.pending, (state) => {
          state.loading = true;
        })
        .addCase(fetchIngredients.fulfilled, (state, action: PayloadAction<TIngredient[]>) => {
          state.ingredients = action.payload;
          state.loading = false;
        })
        .addCase(fetchIngredients.rejected, (state) => {
          state.error = 'Ошибка при получении данных';
          state.loading = false;
        });
    }
});

export const ingredientSliceReducer = ingredientSlice.reducer;
export const { getIngredients } = ingredientSlice.actions;

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

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: