Где я должен получить данные в приложении Reactjs?

Question

Я создаю приложение Reactjs.Я столкнулся с проблемой и хочу знать, где получить данные из базы FireBase.Лучше ли получать коллекции данных в корневом компоненте (App.jsx) или в отдельных компонентах?

Пока у меня есть пользователи, продукты и коллекции продаж.Некоторые компоненты используют данные из одной коллекции.Пример: Компонент платежей также использует данные сбора продаж для аналитики.

Случай 1: Если я получаю данные в корневом компоненте, мне не нужно извлекать данные внутри компонентов.

Случай 2: Если я получаю данные внутри компонентов, я получаю одни и те же данные дважды дляразные компоненты на разных маршрутах.

Пожалуйста, посоветуйте мне лучший способ справиться с ситуацией.

Answer 1

Вы отметили Redux в своем вопросе, поэтому я предполагаю, что вы используете его в своем приложении React?

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

Answer 2

Случай 1: - если вы извлекаете все данные из корневого компонента. вы будете иметь дело с большим количеством данных в начале, замедлит первоначальную загрузку приложения (но должно подойти для очень маленьких приложений). Не рекомендуется для средних и крупных приложений.
Случай 2: - Этот подход хорош, но увеличит небольшую задержку во всех компонентах (для получения данных из API), но если вы обеспокоены использованием пропускной способности и задержкой. вам следует подумать о едином хранилище данных, таком как избыточный. Получите данные один раз, используя actions / sideEffects из redux / thunk и т. Д., Сохраните их в хранилище redux. использовать те же данные во всех остальных компонентах.