Как правильно инициализировать приложение написанное на реакте?

@muxahuk1214 · Регистрация: 04.09.2013

Студворк — интернет-сервис помощи студентам

Всем привет.

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

Пример:
Есть роутер, к нему присоединяется history модуль, на этот history модуль идёт подписка и отправляются на сервер данные по взаимодействию пользователя со страницей (ака отслеживание куда он переходил и т.п.), а так же, как замена старому, встроенна новая система которая называется piwik (по сути то же самое, только не самописное) с новыми возможностями, так же подписывается на history.

Сейчас в проекте инициализация подписки грубо говоря происходит в index.ts и history передаётся в Router компонент.
Так вот, одной из новых "фишек" этой piwik является то, что можно передать email пользователя и конкретно понимать кто это.
(не вглубляясь в подробности) пользователя мы запрашиваем только когда происходит componentWillMount (или что там), запросом на сервер, в App реакт модуле и пропагируется в стейт и т.п. для дальнейшего использования в разных компонентах апликации.

Так вот, теперь вопрос:

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

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

Как один из теоретических вариантов я вижу, что мы можем создать контекст с history экземпляром в качестве значения и далее написав реакт компонент высшего порядка подписаться на этот стейт и делать отправку данных на сервер и на piwik,
но при этом, если у нас будет "другой" модуль, который будет не только подписываться, а так же расширять возможности history (т.е. нужно сделать history = someEnhancement(history)), то я не очень понимаю как это можно сделать в контексте..
а если выносить эту часть логики, то почему бы не вынести всё?.. вопрос - как правильно и какие паттерны есть?

(данный пример с history частный случай, я больше чем уверен что куча таких библиотек, которые надо инициализировать и расширять до того как использовать в реакт компонентах.. и какой подход есть для "всех" такие библиотек и стучаев)

@shsv382 · 01.05.2020, 16:38

Сообщение от muxahuk1214

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

если нужно передать сохраненный user.email - это работа с сессией (cookies или JWT)

Сообщение от muxahuk1214

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

Всеми любимый принцип DRY: если и новая, и самописная библиотека делают одно и то же, то зачем они обе?

Сообщение от muxahuk1214

нужно сделать history = someEnhancement(history)

а нефиг изменять структуру history, делай чистую функцию:

JavaScript
1
2
3
history = Object.assign({}, history, someEnhancement(history));
// или
history = {...history, someEnhancement(history)};

надеюсь, я правильно понял твои нужды, и что-то из моих советов поможет тебе!

@muxahuk1214 · 13.05.2020, 23:38 **[ТС]**

Сообщение от shsv382

надеюсь, я правильно понял

нет, не правильно.

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

@muxahuk1214 Coding is art 540 / 423 / 154 Регистрация: 04.09.2013 Сообщений: 1,066

	Как правильно инициализировать приложение написанное на реакте? 29.04.2020, 22:50. Показов 1269. Ответов 2 Метки dependency injection, flow control, react (Все метки) Всем привет. На работе занялся рефакторингом прилодения написанного на реакте. И столкнулся с такой ситуацией, что в проекте есть зависимости, которые как бы не встраиваются в лайфсайклы реакта. Пример: Есть роутер, к нему присоединяется history модуль, на этот history модуль идёт подписка и отправляются на сервер данные по взаимодействию пользователя со страницей (ака отслеживание куда он переходил и т.п.), а так же, как замена старому, встроенна новая система которая называется piwik (по сути то же самое, только не самописное) с новыми возможностями, так же подписывается на history. Сейчас в проекте инициализация подписки грубо говоря происходит в index.ts и history передаётся в Router компонент. Так вот, одной из новых "фишек" этой piwik является то, что можно передать email пользователя и конкретно понимать кто это. (не вглубляясь в подробности) пользователя мы запрашиваем только когда происходит componentWillMount (или что там), запросом на сервер, в App реакт модуле и пропагируется в стейт и т.п. для дальнейшего использования в разных компонентах апликации. Так вот, теперь вопрос: Какие паттерны есть, для того, что бы при инициализации history до того как мы рендерим реакт, у нас уже был доступ к пользователю, при этом, не делая дополнительные запросы, что бы поместить его потом в глобальный стейт. Как устроить приложение так, что бы те инициализации библиотек, которые нужны для работы приложения и которые не являются компонентами реакта самими по себе работали вместе с глобальным стейтом и с реакт компонентами, и там где запросы пересекаются их не дублировать? Как один из теоретических вариантов я вижу, что мы можем создать контекст с history экземпляром в качестве значения и далее написав реакт компонент высшего порядка подписаться на этот стейт и делать отправку данных на сервер и на piwik, но при этом, если у нас будет "другой" модуль, который будет не только подписываться, а так же расширять возможности history (т.е. нужно сделать history = someEnhancement(history)), то я не очень понимаю как это можно сделать в контексте.. а если выносить эту часть логики, то почему бы не вынести всё?.. вопрос - как правильно и какие паттерны есть? (данный пример с history частный случай, я больше чем уверен что куча таких библиотек, которые надо инициализировать и расширять до того как использовать в реакт компонентах.. и какой подход есть для "всех" такие библиотек и стучаев) 0