Я написал серию из трех частей, чтобы создать youtube player. Он использовал только React и сильно зависит от обратных вызовов от дочерних элементов к родительским, а в одном случае — от двухуровневого.
Мы можем решить эту проблему, используя три решения — Flux, Redux, Context API. В этом уроке мы рассмотрим решение этой проблемы с помощью Flux.

Сначала мы кратко рассмотрим, что такое Flux. Flux также следует однонаправленному потоку реакции, но это замкнутый круг. Он состоит из четырех частей: компоненты React, действия, диспетчер и хранилище.

Компонент React
Он либо создает действие, либо прослушивает изменения в хранилище, либо делает и то, и другое.

Действия
Выполнить какое-либо действие при запуске компонента и передать его диспетчеру.

Диспетчер
Просто посредник, отправляет действия во все магазины

Store
Управляет логикой и отправляет изменения, которые должны быть приняты компонентами.

В этом рефакторинге Flux нам нужны только три компонента. Основной поток будет таким, как показано ниже. Мы поймем это лучше, как только построим его.

Вы можете прочитать остальную часть блога на моем блоге. Ссылка ниже.