slice имеет вид: type TBurgerState = { burgerIngredients: TConstructorIngredient[]; bun: TConstructorIngredient | null; }; const initialState: TBurgerState = { burgerIngredients: [],

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

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; Нужно дописать функции с использованием moveBurgerIngredient : const handleMoveDown = () => {}; const handleMoveUp = () => {}; const handleClose = () => {}; в компоненте export const BurgerConstructorElement: FC<BurgerConstructorElementProps> = memo( ({ ingredient, index, totalItems }) => { const handleMoveDown = () => {}; const handleMoveUp = () => {}; const handleClose = () => {}; return ( <BurgerConstructorElementUI ingredient={ingredient} index={index} totalItems={totalItems} handleMoveUp={handleMoveUp} handleMoveDown={handleMoveDown} handleClose={handleClose} /> ); } );

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

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

Для реализации функций handleMoveDown, handleMoveUp и handleClose в компоненте BurgerConstructorElement, вы можете использовать функции moveBurgerIngredient из slice.

Вот как вы можете их реализовать:

export const BurgerConstructorElement: FC<BurgerConstructorElementProps> = memo(
  ({ ingredient, index, totalItems }) => {
    const dispatch = useDispatch();

    const handleMoveDown = () => {
      if (index < totalItems - 1) {
        dispatch(moveBurgerIngredient({ currentIndex: index, targetIndex: index + 1 }));
      }
    };

    const handleMoveUp = () => {
      if (index > 0) {
        dispatch(moveBurgerIngredient({ currentIndex: index, targetIndex: index - 1 }));
      }
    };

    const handleClose = () => {
      dispatch(removeBurgerIngredient(ingredient.id));
    };

    return (
      <BurgerConstructorElementUI
        ingredient={ingredient}
        index={index}
        totalItems={totalItems}
        handleMoveUp={handleMoveUp}
        handleMoveDown={handleMoveDown}
        handleClose={handleClose}
      />
    );
  }
);

В этих функциях мы используем useDispatch для вызова функций из slice. В функции handleMoveDown мы проверяем, что текущий индекс не является последним элементом, и вызываем moveBurgerIngredient с текущим и следующим индексом. В функции handleMoveUp мы проверяем, что текущий индекс не является первым элементом, и вызываем moveBurgerIngredient с текущим и предыдущим индексом. В функции handleClose мы вызываем removeBurgerIngredient для удаления ингредиента из бургера.

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

export const BurgerConstructorElement: FC<BurgerConstructorElementProps> = memo(
  ({ ingredient, index, totalItems }) => {
    const dispatch = useDispatch();

    const handleMoveDown = () => {
      if (index < totalItems - 1) {
        dispatch(moveBurgerIngredient({ currentIndex: index, targetIndex: index + 1 }));
      }
    };

    const handleMoveUp = () => {
      if (index > 0) {
        dispatch(moveBurgerIngredient({ currentIndex: index, targetIndex: index - 1 }));
      }
    };

    const handleClose = () => {
      dispatch(removeBurgerIngredient(ingredient.id));
    };

    return (
      <BurgerConstructorElementUI
        ingredient={ingredient}
        index={index}
        totalItems={totalItems}
        handleMoveUp={handleMoveUp}
        handleMoveDown={handleMoveDown}
        handleClose={handleClose}
      />
    );
  }
);

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

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

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

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