Блог

Главная - Вопросы по программированию - Рефакторинг кода javascript проблема с react redux

Рефакторинг кода javascript проблема с react redux

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть код, подобный приведенному ниже. Нет глубоких знаний в javascript. Хочу добавить какой-то продукт в redux. Мое первоначальное определение редуктора приведено ниже

 const initState = {
    order: {
        item1: [],
        item2: [],
        item3: [],
      }
    }

Чтобы добавить разные товары в корзину, я использую функцию ниже. Каждый элемент будет представлять собой список объектов

     const addToCart = (state, action) => {
    if (action.payload.service === 'item1') {
        return {
            ...state,
            order: {
                ...state.order,
                item1: [...state.order.item1, action.payload.item]
            }
        }
    } else if (action.payload.service === 'item2') {
        return {
            ...state,
            order: {
                ...state.order,
                item2: [...state.order.item2, action.payload.item]
            }
        }
    }
}

можно ли это сделать в одном коде динамически без каких-либо условий? Мой заказ будет таким, как показано ниже

 order: {
        item1: [{'name': 'name1', 'quantity': 2}, {'name': 'name3', 'quantity': 5}],
        item2: [],
        item3: [],
      }

Комментарии:

1. Вы уже передаете ключ элемента в действие через action.payload.service , так что вы можете просто использовать это. Есть [action.payload.service]: [...state.order[action.payload.service], action.payload.item]

2. Пожалуйста, напишите в качестве ответа. Это работает. Спасибо

3. Кто-то уже опубликовал это, вы можете просто пометить это как правильное 🙂

4. Для доступа к ответу осталась еще 1 минута

Ответ №1:

Я считаю, что для того, чтобы удалить условный оператор, предполагая, что имя ключа заказа совпадает с именем службы из вашей полезной нагрузки, вы можете получить доступ к ключу и назначить его, передав значение из самой полезной нагрузки. Итак, вместо чего-то подобного, что у вас есть в редукторе, вы получите что-то вроде этого:

  const addToCart = (state, action) => {
        return {
            ...state,
            order: {
                ...state.order,
                [action.payload.service]: [...state.order[action.payload.service], action.payload.item]
            }
        }
    }