используя Socket.io с React и Redux для обработки сотни обновлений в секунду

У меня есть список объектов, которые являются объектами данных с сервера (около 1000), которые мне нужно сортировать, фильтровать, помещать в Redux и подключаться к компоненту React table. Я использую socket.io для прослушивания обновлений, которые отправляют эти отдельные объекты данных, которые затем должны быть рассчитаны в таблицу. они могут быть обновлением, новым или удалением существующего.

Итак, мой вопрос заключается в том, как наилучшим образом управлять так много событий сокетов данных сокетов? должен ли я просто дросселировать их, прежде чем я обновляю их в состоянии сокращения? я не хочу постоянно обновлять мое состояние redux, или мой компонент таблицы будет повторно отображать слишком много.

моя другая опция - я могу запросить текущий обновленный список всех «активных» данных и просто игнорировать события обновления. поэтому, возможно, каждые несколько секунд просто обновлять всю таблицу со всеми последними данными, а не пытаться управлять сотнями обновлений в секунду.

reactjs,redux,socket.io,real-time-updates,

0

Ответов: 1


1

Я хотел бы использовать REST-вызовы api, но притворяясь обновлением в начале действия reducex, ничего не делая, кроме, возможно, добавляя правильный идентификатор к вашему объекту при успешном завершении и возвращая состояние только с ошибкой.

Ваш редуктор вроде бы выглядел бы так, как если бы делался элемент:

export default (state = {}, action) => {
  switch (action.type) {
    case ActionsTypes.CREATE_START:
      // make the temporary changes

    case ActionsTypes.CREATE_SUCCESS:
      // update the previous temporary id with a proper id

    case ActionsTypes.CREATE_FAILURE:
      // delete the temporary changes

    default:
      return state;
  }
};

И ваши действия:

const ActionLoading = item => ({
  type: ActionsTypes.CREATE_START,
  item,
});

const ActionSuccess = item => ({
  type: ActionsTypes.CREATE_SUCCESS,
  item ,
  createdItem,
});

const ActionFailure = item => ({
  type: ActionsTypes.CREATE_FAILURE,
  item,
});

export default todo => (dispatch) => {
  dispatch(ActionLoading(item)); // add the item to your state

  const updatedTodo = await TodoClient.create(todo)

  if (updatedTodo) {
    dispatch(ActionSuccess(item, createdItem)) // update the temp item with a real id
  } else {
    dispatch(ActionFailure(item)) // remove the temporary item 
  }
};

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

Вам также придется реализовать это поведение для обновлений и удаления, но это в основном то же самое:

  • сохраните изменения, обновите свой объект, не дожидаясь api и верните изменения при сбое.
  • удалите свой объект, не дожидаясь появления api, и вытащите его обратно при сбое.

Это даст ощущение реального времени, так как все будет обновляться мгновенно и только вернется к неуправляемым ошибкам. Если вы достаточно доверяете своему бэкэнду, это путь.

EDIT: просто увидели ваше обновление, вы можете придерживаться этого способа мутации данных (или обычного способа обновления состояния при успехе), но чтобы избежать слишком большой сложности и времени рендеринга, убедитесь, что вы храните свои данные с помощью keyBy . Как только ваши объекты будут сохранены в виде массива объектов с ключом по их идентификатору, вы сможете добавлять, удалять и изменять их с помощью сложности O (1). Кроме того, реакция будет понимать, что не нужно повторно отображать весь список, а только один обновленный элемент.

reactjs, перевождь, Socket.io, в режиме реального времени-обновления,
Похожие вопросы
Яндекс.Метрика