Redux: постоянное обновление значений объектов внутри массива - PullRequest
Новая
       6

Redux: постоянное обновление значений объектов внутри массива

0 голосов
/ 07 сентября 2018 
const initialState = {
  arr: [
    {
      name: "Chicken",
      grade: "A",
      quantity: 0
    },
    {
      name: "Mutton",
      grade: "B",
      quantity: 0
    },
    {
      name: "Sandwich",
      grade: "A-Plus",
      quantity: 0
    }
  ]
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.ADD_QUANTITY:
      return {
        ...state,
        arr: {
          ...state.arr,
          [state.arr[action.index]]: {
            ...state.arr[action.index],
            [state.arr[action.index][0].quantity]:
              [state.arr[action.index][0].quantity] + 1
          }
        }
      };
    default:
      return state;
  }
};

Я пытаюсь постоянно обновлять количество. Каждый раз, когда я нажимаю на кнопку, количество должно увеличиваться на 1. Код выше, который я написал, неверен (следовательно, здесь размещен запрос). Буду признателен, если кто-нибудь покажет мне, где я ошибся, и укажет мне правильное направление.

Окончательный результат, который я ожидаю: 

arr: [
    {
      name: "Chicken",
      grade: "A",
      quantity: 1   // Updated value
    },
    {
      name: "Mutton",
      grade: "B",
      quantity: 0
    },
    {
      name: "Sandwich",
      grade: "A-Plus",
      quantity: 0
    }
  ]

1 Ответ

0 голосов
/ 07 сентября 2018

Есть несколько вещей, которые не будут работать с вашим текущим кодом. Ваше начальное состояние определяет arr как массив, но ваш редуктор вместо этого возвращает объект. Кроме того, когда вы пытаетесь получить доступ к клавише quantity объекта внутри arr, вы используете дополнительный индексатор доступа [0], который не соответствует вашей структуре данных.

Я бы также предложил составить редукторы (используя ОбъединитьReducers ), чтобы упростить отслеживание структуры данных. Комбинирование редукторов позволяет вам обрабатывать отдельные уровни вашей структуры данных, не беспокоясь о всей структуре. Кроме того, использование оператора распространения хорошо работает для объектов, но такие функции, как map, иногда более понятны при работе с массивами.

Что-то подобное сделает то, что вам нужно: 

const arr = (state = initialState.arr, action) => {
    switch (action.type) {
        case actionTypes.ADD_QUANTITY:
            return state.map((element, i) => {
                return i === action.index ? {...element, quantity: element.quantity + 1} : element;
            });
        default:
            return state;
    }
}

const rootReducer = combineReducers({arr});
...