Обновить состояние объекта в редукторе

Question

Я новичок в реакции js. Здесь у меня есть функциональность, где есть три строки сравнения, которые можно добавить или удалить. У меня есть редуктор, как,

const initialState = {
    Low: [
        {
            id: 'L0',
            technologyId: 0,
            technology: '',
            type: '',
            count: '',
            level: 'EASY'
        }
    ],
    Medium: [
        {
            id: 'M0',
            technologyId: 0,
            technology: '',
            type: '',
            count: '',
            level: 'Medium'
        }
    ],
    High: [
        {
            id: 'H0',
            technologyId: 0,
            technology: '',
            type: '',
            count: '',
            level: 'Tough'
        }
    ],

Так вот, я хочу, чтобы это было как универсальное, поэтому я пытаюсь добавлять объекты по нажатию плюса и удалять по -. Таким образом,

Здесь я добавляю, используя,

const tempObj = {
      id: tempvar + id,
      technologyId: 0,
      technology: temp[0].technology,
      type: type,
      count: '',
      level: addtype
    }

Создание этого объекта теперь зависит от addType, который я добавляю в этот конкретный массив.

Я делаю это так,

const addData = [...this.props.lowData[addtype], tempObj];

    this.props.addNewTech(addData);

Итак, вот этот ...this.props.lowData[addtype] возвращает объект, а не массив, это проблема? Если да, он должен возвращать массив не объект, а как это возвращает объект, а не массив. Мой props.lowData похож на

объект с тремя разными массивами, я имею в виду тот же, что и у редуктора., Но каждый раз, когда я добавляю, он добавляет этот элемент только в массив Low, а не в средний или высокий. Может ли кто-нибудь помочь мне с этим?

Answer 1

Проблема в том, что вы обновляете только свойство Low. Вам необходимо проверить, какое свойство необходимо обновить. Для этого вы можете передать addtype вашему создателю действия следующим образом:

this.props.addNewTech({ addData, addtype });

А потом в действии создатель

export function addNewTech(data) { 
  return {
     type: ADD_NEW, 
     data //is equavalent to data: data (ES6)
  } 
} 

А потом в редукторе динамически обновлять объект

    case ADD_NEW: 
      return { 
        ...state, 
        //here choose the property to be updated dynamically
        //replace Low: action.data with below line
        [action.data.addtype]: action.data.addData, 
        error: false, 
      } 

** Обратите внимание: [action.data.addtype]: action.data.addData мы используем вычисляемые имена свойств в ES6.