import { FC, memo } from 'react'; import { useLocation } from 'react-router-dom'; import { BurgerIngredientUI } from '@ui'; import { TBurgerIngredientProps } from './type'; export const Bu

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

import { FC, memo } from 'react'; import { useLocation } from 'react-router-dom'; import { BurgerIngredientUI } from '@ui'; import { TBurgerIngredientProps } from './type'; export const BurgerIngredient: FC<TBurgerIngredientProps> = memo( ({ ingredient, count }) => { const location = useLocation(); const handleAdd = () => {}; return ( <BurgerIngredientUI ingredient={ingredient} count={count} locationState={{ background: location }} handleAdd={handleAdd} /> ); } ); Нужно написать функцию handleAdd которая использует функцию addBurgerIngredient из slice type TBurgerState = { burgerIngredients: TConstructorIngredient[]; bun: TConstructorIngredient | null; }; const initialState: TBurgerState = { burgerIngredients: [], bun: null }; const burgerSlice = createSlice({ name: 'burgers', initialState, reducers: { addBurgerIngredient: { reducer: (state, action: PayloadAction<TConstructorIngredient>) => { if (action.payload.type === 'bun') { state.bun = action.payload; } else { state.burgerIngredients.push(action.payload); } console.log(action.payload._id); }, prepare: (ingredient: TIngredient) => { const id = nanoid(); return { payload: { ...ingredient, id } }; } }, removeBurgerIngredient: (state, action: PayloadAction<string>) => { state.burgerIngredients = state.burgerIngredients.filter( (ingredient) => ingredient.id !== action.payload ); }, moveBurgerIngredient: ( state, action: PayloadAction<{ currentIndex: number; targetIndex: number }> ) => { const { currentIndex, targetIndex } = action.payload; const ingredientToMove = state.burgerIngredients[currentIndex]; state.burgerIngredients.splice(currentIndex, 1); state.burgerIngredients.splice(targetIndex, 0, ingredientToMove); }, clearBurger: (state) => { state.burgerIngredients = []; state.bun = null; } }, selectors: { getBurgerIngredientsSelector: (state) => state.burgerIngredients, getBunSelector: (state) => state.bun } }); export const burgerSliceReducer = burgerSlice.reducer; export const { addBurgerIngredient, removeBurgerIngredient, moveBurgerIngredient, clearBurger } = burgerSlice.actions; export const { getBurgerIngredientsSelector, getBunSelector } = burgerSlice.selectors; export default burgerSlice;

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

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

Для того чтобы использовать функцию addBurgerIngredient из slice в функции handleAdd, вам нужно передать эту функцию в компонент BurgerIngredient как пропс. Далее вы можете вызвать эту функцию внутри handleAdd.

Пример:

import { FC, memo } from 'react';
import { useLocation } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { addBurgerIngredient } from './burgerSlice'; // импортируем функцию addBurgerIngredient из slice
import { BurgerIngredientUI } from '@ui';
import { TBurgerIngredientProps } from './type';

export const BurgerIngredient: FC<TBurgerIngredientProps> = memo(
  ({ ingredient, count }) => {
    const location = useLocation();
    const dispatch = useDispatch(); // создаем диспатч для вызова функции из slice

    const handleAdd = () => {
      dispatch(addBurgerIngredient(ingredient)); // вызываем функцию addBurgerIngredient из slice
    };

    return (
      <BurgerIngredientUI
        ingredient={ingredient}
        count={count}
        locationState={{ background: location }}
        handleAdd={handleAdd}
      />
    );
  }
);

Теперь при вызове handleAdd в компоненте BurgerIngredient, будет добавляться ингредиент в состояние бургера с помощью функции addBurgerIngredient из slice.

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

import { FC, memo } from 'react';
import { useLocation } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { addBurgerIngredient } from './burgerSlice'; // импортируем функцию addBurgerIngredient из slice
import { BurgerIngredientUI } from '@ui';
import { TBurgerIngredientProps } from './type';

export const BurgerIngredient: FC<TBurgerIngredientProps> = memo(
  ({ ingredient, count }) => {
    const location = useLocation();
    const dispatch = useDispatch(); // создаем диспатч для вызова функции из slice

    const handleAdd = () => {
      dispatch(addBurgerIngredient(ingredient)); // вызываем функцию addBurgerIngredient из slice
    };

    return (
      <BurgerIngredientUI
        ingredient={ingredient}
        count={count}
        locationState={{ background: location }}
        handleAdd={handleAdd}
      />
    );
  }
);

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

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

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

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