есть компонент Нужно в нем реализовать возможность применения функции очистки clearBurger из slice Компонент: export const BurgerConstructor: FC = () => { /** TODO: взять переменные con

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

есть компонент Нужно в нем реализовать возможность применения функции очистки clearBurger из slice Компонент: export const BurgerConstructor: FC = () => { /** TODO: взять переменные constructorItems, orderRequest и orderModalData из стора */ const constructorItemsIngredients = useSelector(getBurgerIngredientsSelector); const constructorItemsbun = useSelector(getBunSelector); const constructorItems = { ingredients: constructorItemsIngredients, bun: constructorItemsbun }; // const constructorItems = { // bun: { // price: 0 // }, // ingredients: [] // }; const orderRequest = false; const orderModalData = null; const onOrderClick = () => { if (!constructorItems.bun || orderRequest) return; }; const closeOrderModal = () => {}; const price = useMemo( () => (constructorItems.bun ? constructorItems.bun.price * 2 : 0) + constructorItems.ingredients.reduce( (s: number, v: TConstructorIngredient) => s + v.price, 0 ), [constructorItems] ); // return null; return ( <BurgerConstructorUI price={price} orderRequest={orderRequest} constructorItems={constructorItems} orderModalData={orderModalData} onOrderClick={onOrderClick} closeOrderModal={closeOrderModal} /> ); }; 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 { getBurgerIngredientsSelector, getBunSelector } = burgerSlice.selectors; export default burgerSlice;

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

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

Для реализации возможности применения функции очистки clearBurger из slice в компоненте BurgerConstructor, вам необходимо использовать хук useDispatch из библиотеки react-redux.

Импортируйте хук useDispatch из библиотеки react-redux:

import { useDispatch } from 'react-redux';

Импортируйте функцию clearBurger из slice:

import { clearBurger } from 'путь_к_вашему_slice';

Создайте переменную dispatch, используя хук useDispatch:

const dispatch = useDispatch();

Добавьте обработчик события для очистки бургера при клике на кнопку очистки:

const onClearBurgerClick = () => {
  dispatch(clearBurger());
};

Передайте onClearBurgerClick в компонент BurgerConstructorUI:

return (
  <BurgerConstructorUI
    price={price}
    orderRequest={orderRequest}
    constructorItems={constructorItems}
    orderModalData={orderModalData}
    onOrderClick={onOrderClick}
    closeOrderModal={closeOrderModal}
    onClearBurgerClick={onClearBurgerClick}
  />
);

Теперь при клике на кнопку очистки в компоненте BurgerConstructor будет вызываться функция clearBurger из slice, которая очистит список ингредиентов бургера и булку.

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

return (
  <BurgerConstructorUI
    price={price}
    orderRequest={orderRequest}
    constructorItems={constructorItems}
    orderModalData={orderModalData}
    onOrderClick={onOrderClick}
    closeOrderModal={closeOrderModal}
    onClearBurgerClick={onClearBurgerClick}
  />
);

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

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

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

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