переопределить существующие объекты, когда pu sh в массиве - заменить или добавить

Question

Предположим, мы пытаемся подключить веб-сокет. сервер веб-сокетов отправляет некоторые данные для получения статуса клиента, который представляет онлайн или офлайн. Я попытался сохранить эти данные в redux (отлично работает), но мне нужно мгновенно изменить эти статусы, переопределив существующие объекты. Мне нужны некоторые функции для переопределения моего хранилища redux. Я дошел до фрагмента ниже.

но:

этот код pu sh объекты в моем хранилище redux не отменяют

  const [status, set_status] = useState([]);

  useEffect(() => {
    const socket = io(ws_api, {
      query: `token=${localStorage.getItem("token")}`,
    });

    socket.on("message", (data) => {

      status.map((item) => {
        if (item.application === data.application) {
          item["status"] = data.status;
        } else {
          set_status((status) => [...status, data]);
        }
      });

    });
  }, []);

  useEffect(() => {
    get_client_status(status); // redux action
  }, [status]);

структура данных, поступающая из сокета в сообщении

{
  application: "5ede25f4d3fde1c8a70f0a38"
  client: "5ede25f4d3fde1c8a70f0a36"
  status: "offline"
}

Answer 1

Сначала найдите в текущем состоянии любые существующие элементы данных, если они найдены, обновите его, в противном случае добавьте в массив.

Используя array :: findIndex

const messageHandler = data => {
  const dataIndex = status.findIndex(
    item => item.application === data.application
  );

  if (dataIndex !== -1) {
    set_status(status =>
      status.map(item => {
        return item.application === data.application
          ? { ...item, status: data.status }
          : item;
      })
    );
  } else {
    set_status(status => [...status, data]);
  }
});

Использование array :: find

const messageHandler = data => {
  const found = status.find(item => item.application === data.application);

  if (found) {
    set_status(status =>
      status.map(item => {
        return item.application === data.application
          ? { ...item, status: data.status }
          : item;
      })
    );
  } else {
    set_status(status => [...status, data]);
  }
});

Изменить: определить этот обратный вызов вне эффекта

useEffect(() => {
  socket.on("message", messageHandler);
}, []);