Действия Redux, запускаемые селекторами

Question

Мне трудно реализовать Redux на тихом большом веб-сайте.

У меня есть компоненты, подключенные к магазину с использованием API useSelector. Я использую Reselect для записи селекторов.

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

У меня есть контейнер, состоящий из компонентов без состояния, который принимает только реквизиты и отображает их.В контейнере можно запускать все действия для получения данных из API.(используя redux-thunk) Основная проблема заключается в том, что разработчики должны перечислить действия, которые должны быть запущены для отображения страницы.

Но мне было интересно, могу ли я просто вызвать правильное действие при попытке выбрать данныеиз магазина:

export function getComment(state, id) {

  const comments = state.comments;

  if (comments[id]) {
    return comments[id];
  }

  store.dispatch(CommentActions.getComment(id));
  return undefined;
}

Компоненты здесь просто «привязывают» себя к данным в магазине.Если данные уже есть, они возвращаются, в противном случае запускается действие, которое вызывает API и возвращает неопределенное значение.

Мой основной вопрос - является ли этот подход анти-паттерном, то есть селекторы не являются чистымифункции, потому что они вызывают побочные эффекты и т. д.

У нас есть как минимум два повторных рендеринга, один с неопределенным, а другой - при ответе API.

Заранее спасибо!

Answer 1

Диспетчеризация внутри повторного выбора не обсуждается в официальной документации Redux, поэтому ее не следует считать хорошим решением.

Но есть решения, очень близкие к тому, чего вы хотите достичь.Например, redux-async-loader или использование React.Lazy с Redux .

Общая идея обоих подходов - переместить выборку данных в функцию connect (где происходит повторный выбор).В этом термине оба подхода очень близки к тому, что вы пытаетесь достичь с помощью диспетчеризации при повторном выборе.

1. Redux-async-loader, с моей точки зрения, немного проще.Создает компонент более высокого порядка, который охватывает connect.

2. React.Lazy делает то же самое.Кроме того, вы можете использовать компонент Suspense для временного отображения «загрузки данных ...» при ожидании данных.