Вопрос пользователя:
Как с использованием slisce 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;
Написать функцию handleRemove в которую передается removeBurgerIngredient,
export const BurgerConstructor: FC = () => {
const constructorItemsIngredients = useSelector(getBurgerIngredientsSelector);
const constructorItemsbun = useSelector(getBunSelector);
const constructorItems = {
ingredients: constructorItemsIngredients,
bun: constructorItemsbun
};
const dispatch = useDispatch(); // создаем диспатч для вызова функции из slice
const handleRemove = () => {
dispatch(burgerSlice.actions.removeBurgerIngredient()); // вызываем функцию removeBurgerIngredient из slice
};
// 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}
/>
);
};
Ответ нейросети:
Пройдите быструю авторизацию для просмотра: Войти через Google
Войти через Яндекс
Войти через VK
const handleRemove = () => {
const ingredientIdToRemove = // specify the id of the ingredient you want to remove
dispatch(removeBurgerIngredient(ingredientIdToRemove));
};