Как изменить состояние определенного элемента в Store?

Question

[Антон]

Имеется store с таким содержанием:

{routingTasks: {
 taskData: {
  message: "Успешно",
  infoTask: {
    0: {
        ID: "ZX001",
        TIME: "15.06.2020 12:20",
        ROUTE: null,
       }
    1: {...},
    2: {...},
   }
  }
 }
}

Нужно обновить состояние определенного элемента, например routingTasks.taskData.infoTask[1].ROUTE. Как это сделать?

Использую редюсер такого вида:

const tasksData = handleActions({
  [setActionRequest.toString()]: (state, action) => ({
    ...state,
    ROUTE: action.payload,
  }),
},
null,
);

В action.payload получаются данные такого вида:

{ID: "ZX052",
 ROUTE: "VASYA",}

Comments

[MifeeX]

можно пж скрин кода? со вложенностью попа какая-то. Спасибо!

[Дмитрий]

Форматируйте пожалуйста код должным образом через тэг "Вставить исходный код"

[Антон]

MifeeX, к сожалению скрины не смогу скинуть. Работаю из закрытой корпоративной сети. Переоформил пост. Посмотрите, пожалуйста.

[Антон]

Дмитрий, извините, писал с телефона. Сейчас оформил.

[MifeeX]

Антон, мэйби так..?

let newState = {...state};

	newState.infoTask = {...state.taskData.infoTask}

Затем пробегаемся циклом по всем элементам и сравниваем ID в редюсере с пришедшим ID и если где-то есть совпадения меняем с null на необходимые даннные

[Антон]

MifeeX, а можно полностью описать код? По типу:

const tasksData = handleActions({
  [setActionRequest.toString()]: (state, action) => ({
    ...state,
    ROUTE: action.payload,
  }),
},
null,
);

А то я уже столько мучаюсь, что ничерта не получается даже элементарные вещи предложенные вами написать. :(

Сделал так:

const tasksData = handleActions({
  [setActionRequest.toString()]: (state, action) => ({
    let newState = {...state};
    state.map() {
       if ( // что писать дальше?
  }),
},
null,
);

[MifeeX]

Антон, infoTask сделай массивом и прокидывай через .forEach, например. Т.е., смотри как это будет

const tasksData = handleActions({
  [setActionRequest.toString()]: (state, action) => ({
    let newState = {...state};
    let infoTask = {...state.taskData.infoTask}
     infoTask.map(e => if(e.id === action.payload.id) return true //вместо него юзай, что хочешь)
  }),
},
null,
);

Если не прав где-то, товарищи взрослые разрабы пните, но только не со зла :)

[Антон]

MifeeX, спасибо большое за ответы. Я уже правда написал чтобы работало как надо.

const tasksData = handleActions({
 [setActionRequest.toString()]: (state, { payload } => {
  if (Array.isArray(state.infoTask)) {
    const id = payload.ID;
    const tasks = state.infoTask.map((task) => {
      let t = task;
      if (task.ID == id) t.ROUTE_USER = payload.ROUTE_USER;
      return t;
    });
   return tasks;
  }
return state;
},
null,
);

Но теперь возникла другая проблема. React после этого действия рендерит заного компонент и вываливается в ошибку, т.к. рендер происходит быстрее чем отрабатывает Redux. Что делать? :)

[MifeeX]

Антон, вам нужно стейт возвращать в самом конце. Т.е. после всех выполненных действий.
return tasks меня смущает

[Антон]

MifeeX, да, я понял. Так он возвращал в state, а не в state.infoTask. Из-за этого и не рендерился компонент, массива в нужном месте не находил. :)

Answer 1

[abberati]

На сайте с документацией есть целая статья про это.

Если не хочется париться, то можно взять immer и писать так:

routingTasks.taskData.infoTask[1].ROUTE = "lol kek"

Comments

[Антон]

С документацией я всей ознакомлен. Но дело в том, что в проекте, котором я принимаю участие, используется подход которого нет в документации.

Как вы предлагаете не работает. Ошибка сразу выдает - "taskData не определен".

[Дмитрий]

Вы не смотрели как написан immer? Потому что если тупо сравниваются все ключи с изначальным массивом, то к производительности могут быть вопросы.

[abberati]

Антон, вам поможет дебаггер

[abberati]

Дмитрий, не смотрел, я его не использую. Но вроде как там прокси