Где должны выполнятся сложные операции в React / Redux?
Начинаю практиковаться в React / Redux. Не понимаю, где должна хранится логика приложения, т. е. выполнятся сложные операции с данными. После прочтения документации у меня сформировалась картина, что, для работы с данными есть Redux Store, редьюсер, функции action-creators, и "умные" React компоненты. Например, через нажатие кнопки вызвалось действие, которое должно достать несколько объектов из store, проделать какие-то сложные операции с этими данными, и, в зависимости от результата, вызвать еще несколько действий, или не вызывать ничего, а просто вернуть новое состояние. В документации Redux написано, что редьюсер должен заниматься исключительно изменением store, то есть, я так понимаю, там должны быть только результаты каких-то сложных функций, а не сами функции? Можно передавать в "умный компонент" данные, и проводить манипуляции с ними там, но эта идея кажется мне подозрительной...
Если редьюсер должен только "вставлять" измененные данные в store, то где должны проводится операции с этими данными? В учебниках приводятся примеры только с операциями инкремента, или замены одного текста в Redux store на другой, но не более. Я понимаю, что многие действия проводятся на сервере, но все же...
Проведение сложных операций и последующая вставка данных в стор не противоречит
В документации Redux написано, что редьюсер должен заниматься исключительно изменением store
, кроме того, при нынешнем уровне железок манипуляции с "несколькими сложными объектами" - фигня. Стоит задумываться об оптимизации, когда вы ворочаете многотонными массивами и бесконечными сложными перерисовками. А учитывая тот факт, что
Начинаю практиковаться в React / Redux
, пока можно не заморачиваться, псевдооптимизации придут с опытом
Для сайд-эффектов и вызовов других action принято использовать middleware(redux-thunk, redux-saga). Ничего подобного в редьюсерах быть не должно.
Редьюсеры должны оставаться чистыми функциями и все вычисления в них должны ограничиваться синхронным обновлением состояния.
Про просто сложные операции коллеги написали, а выполнение очень сложных операций я бы предложил переложить на сервер. Особенно, если подразумевается активное использование памяти. В некоторых случаях браузер может просто убить страницу. Да и на долгих операциях придётся использовать воркеры, дабы не замораживать интерфейс
Если нужно полученые даные обработать перед передачей их в компонент через connect, думаю лутшим местом будет mapStateToProps. Взять данные со стора передать их в функцию обработчик (эта функция называется селектор) по,сле чего обработанное значение через connect попадет в props.
Ничего не мешает вам проводить вычисления в редьюсере, его роль не только в подмене каких-то данных в стор, но и подготовка этих данных. Только не забывайте, что редьюсер должен быть полностью синхронным. Поэтому долгие вычисления будут подвешивать ваше приложение.
Зависит от природы вычислений. Я использую redux thunk для подготовки данных перед отправкой на сервер, получения и преобразования ответа от сервера и дальнейшего вызова dispatch с данными, которые нужно положить в стор. Редюсеры можно использовать для мерджа изменений с текущим состоянием, здесь нельзя делать асинхронные запросы и лучше избегать сложных вычислений. Преобразование данных из стора (фильтрация, сортировка) лучше делать в функциях селекторах с использованием reselect.
