@maxxim9595

Где должны выполнятся сложные операции в React / Redux?

Начинаю практиковаться в React / Redux. Не понимаю, где должна хранится логика приложения, т. е. выполнятся сложные операции с данными. После прочтения документации у меня сформировалась картина, что, для работы с данными есть Redux Store, редьюсер, функции action-creators, и "умные" React компоненты. Например, через нажатие кнопки вызвалось действие, которое должно достать несколько объектов из store, проделать какие-то сложные операции с этими данными, и, в зависимости от результата, вызвать еще несколько действий, или не вызывать ничего, а просто вернуть новое состояние. В документации Redux написано, что редьюсер должен заниматься исключительно изменением store, то есть, я так понимаю, там должны быть только результаты каких-то сложных функций, а не сами функции? Можно передавать в "умный компонент" данные, и проводить манипуляции с ними там, но эта идея кажется мне подозрительной...

Если редьюсер должен только "вставлять" измененные данные в store, то где должны проводится операции с этими данными? В учебниках приводятся примеры только с операциями инкремента, или замены одного текста в Redux store на другой, но не более. Я понимаю, что многие действия проводятся на сервере, но все же...
  • Вопрос задан
  • 1340 просмотров
Решения вопроса 3
rockon404
@rockon404 Куратор тега React
Frontend Developer
Для сайд-эффектов и вызовов других action принято использовать middleware(redux-thunk, redux-saga). Ничего подобного в редьюсерах быть не должно.
Редьюсеры должны оставаться чистыми функциями и все вычисления в них должны ограничиваться синхронным обновлением состояния.
Ответ написан
Tpona
@Tpona
Ужасный перфекционист
Про просто сложные операции коллеги написали, а выполнение очень сложных операций я бы предложил переложить на сервер. Особенно, если подразумевается активное использование памяти. В некоторых случаях браузер может просто убить страницу. Да и на долгих операциях придётся использовать воркеры, дабы не замораживать интерфейс
Ответ написан
@AreHT_cmuT
Если нужно полученые даные обработать перед передачей их в компонент через connect, думаю лутшим местом будет mapStateToProps. Взять данные со стора передать их в функцию обработчик (эта функция называется селектор) по,сле чего обработанное значение через connect попадет в props.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@MrShah
Ничего не мешает вам проводить вычисления в редьюсере, его роль не только в подмене каких-то данных в стор, но и подготовка этих данных. Только не забывайте, что редьюсер должен быть полностью синхронным. Поэтому долгие вычисления будут подвешивать ваше приложение.
Ответ написан
@bini1988
Зависит от природы вычислений. Я использую redux thunk для подготовки данных перед отправкой на сервер, получения и преобразования ответа от сервера и дальнейшего вызова dispatch с данными, которые нужно положить в стор. Редюсеры можно использовать для мерджа изменений с текущим состоянием, здесь нельзя делать асинхронные запросы и лучше избегать сложных вычислений. Преобразование данных из стора (фильтрация, сортировка) лучше делать в функциях селекторах с использованием reselect.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы