Как получить актуальные данные в state при использовании server side event (в момент срабатывания события) в компоненте React?

Question

[Alex657913]

Приветствую.
Есть проблема, не могу найти решения. Буду очень признателен за "наводку" или решение.
Итак, есть компонент содержащий коллекцию эл-тов (ul). Объекты для коллекции (li) хранятся в стейте dialogs.
В useEffect
1) вызывается loadRows(), который загрузит первые 50 объектов и
2)подписка на SSE, который нужен для получения новых объектов dialog c api.
Остальные объекты могут подгружатся на скроле в loadRows(), когда срабатывает событие при достижении границы прокрутки (infinity scroll). Реализацию loadRows() не привожу за ненадобностью.
Суть проблемы:
Допустим сначала загрузился компонент списка - в dialogs 50 эл-тов, затем мы подвигали скроллом - стейт dialogs стал содержать 300 эл-тов.
Теперь срабатывает events.onmessage (прилетел dialog с апи) и в функции которая обрабатывает событие (onmessage), мы обращаемся к стейту dialogs - в нем окажется не 300, а 50 эл-тов. Т.е. в стейте будут сообщения полученные только при инициализации. Пытался использовать редакс, та же фигня (или 0 или 50) . Я думаю, что при вызове createEvents() в useEffect events.onmessage замыкает текущий контекст. Вопрос как можно выйти из такого положение. Есть ли какое-то решение?
Собственно вопрос: Как получить актуальные данные в state при использовании server side event в момент срабатывания события?

Пример кода

export default function ConversationList() {

    let [dialogs, setDialogs] = useState([]);
    let [events, setEvents] = useState(null);

    useEffect( () => async() => {
        await loadRows();
        await createEvents();
    }, []);

    async function createEvents() {
        if (events) events.close();
        setEvents(events = new EventSource(apiHost + urlPaths.eventRegistration));

        events.onmessage = (ev) => {
            const parsedData = JSON.parse(ev.data);
            const id = parsedData?.dialog?._id.toString();
            setDialogs([parsedData?.dialog, ...dialogs?.filter((dialog) => dialog?._id.toString() !== id)]);           
        }
    }
}

Comments

[szQocks]

почему это юзается через EventSource ? чем обычный запрос не угодил и JSON формат

в нем окажется не 300, а 50 эл-тов

твою юз эффект знает о dialogs лишь то что там пустой массив изначально, твой юз эффект не отслеживает изменения твоих diaglos

тебе явно нужно в функции setDialogs получить предыдущее значение, и его фильтровать

setDialogs(prev => [parsedData?.dialog, ...prev.filter((dialog) => dialog?._id.toString() !== id)]);

да и вообще запись странная ппц, и если это опечатка то исправь шоле

useEffect( () => async() => {
        await loadRows();
        await createEvents();
    }, []);

[Alex657913]

Да, большое спасибо, этот вариант рабочий. Я что-то перемудрил вчера и такой вариант даже не стал пробовать, оказалось зря.

SSE использую, потому-что ответ в мой апи идет от другого сервиса, через веб-хук, как приходит ответ, апи пересылает клиенту. Можно было веб-сокеты заюзать, возможно потом так и сделаю, сейчас проще SSE.
Насчет async, да это там лишнее, удалял наскоро.

[szQocks]

Alex657913, функцию

async function createEvents() {
        if (events) events.close();
        setEvents(events = new EventSource(apiHost + urlPaths.eventRegistration));

        events.onmessage = (ev) => {
            const parsedData = JSON.parse(ev.data);
            const id = parsedData?.dialog?._id.toString();
            setDialogs([parsedData?.dialog, ...dialogs?.filter((dialog) => dialog?._id.toString() !== id)]);           
        }
    }

лучше объявить прямо в useEffect , потому что объявлять её за пределами юз эффекта смысла вообще нет, потому что юз эффект запомнил ссылку лишь на первую функцию createEvents которая была создана при монтировании компонента, и получается эта функция постоянно создаётся при каждом ререндере и нигде не используется ( мусор )

+ в useEffect надо закрывать явно соединение из функции очистки, этот функционал тоже реализовать надо, ну и в целом я всё же уверен на 10000% что это можно решить простым запросом, без EventSource, но в любом случае лишь тебе решать что юзать EventSource или запрос

[szQocks]

Alex657913,

что-то хотя бы типа этого

export default function ConversationList() {
    let [dialogs, setDialogs] = useState([]);

    useEffect(() =>
      let events;

      function createEvents() {
        events = new EventSource(apiHost + urlPaths.eventRegistration)

        events.onmessage = (ev) => {
          const parsedData = JSON.parse(ev.data);
          const id = parsedData?.dialog?._id.toString();
          setDialogs(prev => [parsedData?.dialog, ...prev.filter((dialog) => dialog?._id.toString() !== id)]);      
        }
      }
      
      (async () => {
        await loadRows();
        createEvents();
      })();

       return () => events?.close();
    }, []);
}

[Alex657913]

szQocks, я поудалял лишний код для примера. Собственно при перезагрузке, обрыве и прочего, соединение закрывается и пересоздается, респонз клиента на сервере тоже (либо удаляется). Убрать в юхэффект EventSource можно, но это не критично. рендерится один раз, дальше загружает диалоги либо на событии при достижении границы скролла, либо когда прилетает диалог из апи от друих сервисов. Без SSE никак в моем случае. Альтернатива веб-сокеты или лонг поллинг. Пока остановился на SSE, потом возможно поменяю на веб-сокеты. Сейчас все равно пока прототип "пилю". Важно получить рабочую версию как можно быстрее.

[szQocks]

Alex657913,

Собственно при перезагрузке, обрыве и прочего, соединение закрывается и пересоздается

- так и должно быть, а при размонтировании компонента ?

[Alex657913]

Думаю было бы разумно также закрывать соединение, как пример навигация в приложении, пользователь переходит на другую страницу.... но хотелось добавить что-то вроде этого (https://developer.mozilla.org/en-US/docs/Web/API/B...) для получения уведомлений в зоне видимости всего приложения в течении всего сеанса работы, неважно в какой части раздела пользователь. По идее EventSource нужно перенести в другой компонент, уровнем выше.
Вот пообщаешься со спецом и сразу и идеи появляются и "косяки" выявляются ).

Answer 1

[gUWUis]

добавь поверх кода функцию reboot.