Задать вопрос
Demigodd
@Demigodd
redux

Как обновить один элемент в массиве в Redux?

Есть массив Messages:

messages = [
  {
   _id: "111",
   text: "text1"
  },
  {
   _id: "222",
   text: "text2"
  },
]

В Redux во время экшна:

case UPDATE_MESSAGE:
  let foundIndex = state.messages.findIndex(message => message ._id == payload._id);
  state.messages[foundIndex] = payload;

    return {
    ...state,
    messages: [...state.messages]
  };

Если вот так напрямую изменить текущий объект, то выскакивает ошибк:

A state mutation was detected inside a dispatch, in the path...

Как правильнее обновить одно сообщения в массиве?
А вообще, нужно ли так делать или лучше будет после обновления вызвать метод GetAllMessage (который загружает все сообщения для текущей комнаты) через сокет для всех пользователей в текущей комнате.
Но в этом случает у других юзеров пойдет загрузка сообщений, и как-то будет не понятней почему сообщения загружаются.
  • Вопрос задан
  • 1307 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 2
@i1yas 
case UPDATE_MESSAGE:
  let foundIndex = state.messages.findIndex(message => message ._id == payload._id);
  state.messages[foundIndex] = payload;

    return {
    ...state,
    messages: [...state.messages]
  };

Redux ругается потому что вы мутируете исходный state. А затем зачем-то создаете новый массив.
Правильно так:
case UPDATE_MESSAGE:
  let foundIndex = state.messages.findIndex(message => message ._id == payload._id);
  const messages = state.messages[foundIndex].slice(); // .slice() создаст копию массива
  messages[foundIndex] = payload;

    return {
    ...state,
    messages
  };

Возвращать нужно новый объект (массив), в котором были сделаны изменения.
Трогать state напрямую нельзя
Ответ написан
Комментировать
Комментировать
0xD34F
@0xD34F 
case UPDATE_MESSAGE:
  return {
    ...state,
    messages: state.messages.map(n => n._id == payload._id ? payload : n),
  };
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Developer
DARS • Москва
от 200 000 до 250 000 ₽
Опытный Fullstack разработчик
Finandy
от 4 000 $
React Native разработчик
Petsee
от 90 000 до 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Ещё заказы