Когда использовать Flux (и т. д.) с React?

Я работал над довольно простым приложением React в качестве учебного процесса и хочу начать использовать Flux (или, что более вероятно, Redux), чтобы продолжить обучение.

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

С точки зрения неспециалиста, мое лучшее предположение о распространенном варианте использования состоит в том, что Flux позволяет компонентам взаимодействовать друг с другом без передачи общих реквизитов, поэтому, имея это в виду, вот пример того, для чего я надеюсь использовать Flux в моем приложение:

Допустим, у меня есть компонент профиля пользователя, который периодически обновляется с помощью вызова ajax. Пока этот вызов ожидает возврата своих данных, в другом месте страницы отображается загрузочный счетчик gif, а не в родительском или дочернем компоненте, который запускает вызов ajax. В этом сценарии, как бы я использовал Flux, чтобы предложить счетчику отображать/скрывать в соответствующие моменты (т.е. начинать с отправки запроса, заканчивать, когда получен ответ)? Если бы его видимость определялась состоянием компонента профиля, это было бы легко, но, очевидно, мне нужен один компонент для связи с тем, что, как я полагаю, можно было бы назвать дальним родственником.

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

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

Большое спасибо!


person user1381745    schedule 27.05.2016    source источник
comment
1. Использование Redux как средства структурирования ваших компонентов, чтобы они оставались развязанными, но взаимодействовали друг с другом, является отличным вариантом использования Redux. 2. Личное мнение: перейдя с Flux на Redux для своего небольшого приложения, я больше не знаю, зачем кому-то хотеть использовать Flux. Я думаю, что redux docs/tutorial отлично ответит на все ваши вопросы, поэтому я не буду вдаваться в подробности. более подробная информация здесь.   -  person Letharion    schedule 27.05.2016
comment
Прелесть Flux/Redux в том, что это согласованный шаблон для управления данными независимо от того, для чего вы их используете. Почувствуйте, как работает Redux, и попытайтесь реализовать его, не задумываясь о вашем конкретном случае использования. Когда у вас есть шаблон, извлечение данных для любых нужд станет простым процессом.   -  person Jake Haller-Roby    schedule 31.05.2016


Ответы (1)


Redux в основном дает вам глобальное состояние, к которому может подключиться любой компонент.

Итак, для вашего вызова ajax у вас будет 3 действия. Ознакомьтесь с документацией Redux по созданию асинхронных действий.

GET_USER_PROFILE_START
GET_USER_PROFILE_SUCCESS
GET_USER_PROFILE_ERROR

Тогда у вас будут редукторы для

userProfile
isUserProfileLoading

Когда вы запускаете свой запрос ajax, ваше асинхронное действие сначала запускает ваше действие GET_USER_PROFILE_START, которое будет выбрано вашим редюсером isUserProfileLoading и установит isUserProfileLoading в true.

Затем, когда запрос вернется, если он будет успешным, он запустит GET_USER_PROFILE_SUCCESS с полезной нагрузкой userProfile. Ваш редуктор userProfile получит userProfile и установит его в состояние.

Ваш редюсер isUserProfileLoading также будет прослушивать GET_USER_PROFILE_SUCCESS и установит isUserProfileLoading обратно в false, когда увидит это действие.

Если ваш запрос не выполняется, вы запускаете действие GET_USER_PROFILE_ERROR с полезной нагрузкой error и делаете какое-то уведомление в пользовательском интерфейсе. И ваш редьюсер isUserProfileLoading также будет прослушивать GET_USER_PROFILE_ERROR и также установит isUserProfileLoading обратно в false, когда увидит его.

Теперь любой компонент в вашем приложении, независимо от того, где он находится на странице или в иерархии компонентов, может просматривать isUserProfileLoading и отображать счетчик загрузки, если для него установлено значение true.

Надеюсь, это поможет.

person jaybee    schedule 27.05.2016
comment
Отлично спасибо. Именно такое прохождение я и искал. - person user1381745; 31.05.2016