Как из одного модуля передать данные в другой?

#javascript #reactjs

Приложение на реакте, есть главный модуль Main, в который подключает модуль A и модуль B.

Модуль А запрашивает данные с сервера, получает их и фильтрует, после чего добавляет
в массив.

Как мне данные (массив) передать из модуля А в модуль B, если они не связаны между
собой, то есть модуль А и модуль B подгружаются в модуль Main и в нем же отрисовываются?

Как вариант: делать запрос в самом модуле Main, обрабатывать эти данные и передавать
их в модуль В? Но мне кажется, это неверно, ведь данные, которые относятся к модулю
А лучше в нем и обрабатывать. 

Также, фильтрация данных зависит от поведения модуля А, то есть, если я сделал какие-то
манипуляции на UI в этом модуле, то фильтр данных, которые будут передаваться, изменятся,
соответственно данные нужно передавать из модуля А. Вот как это сделать?
    

Ответы

Ответ 1

Точный ответ зависит от сценария.


Если речь идет о наборе данных, который нужен двум компонентам, независимо друг от
друга и просто не хочется делать два запроса на сервер - подумайте о кэшировании на
уровне вашего слоя сервисов для доступа к данным.
Если один компонент загружает данные, обрабатывает их и нужно одностороннее  уведомление
о том, что обработаны некие данные,то раздел Communicate Between Components из документации
гласит:



  For communication between two components that don't have a parent-child relationship,
you can set up your own global event system.


Для реализации такого сценария вам может подойти, например, библиотека PubSubJS


Если речь идет о данных, к которым нужен совместный доступ двух и более модулей,
и каждый должен знать об изменении этих данных другими, то вам может помочь state container.
Hапример: Redux.


Ответ 2

React, сам по себе, беспомощен: в комплекте всегда должна идти библиотека для передачи
данных и событий между компонентами.

Оригинальный стек Facebook называется React/Flux. Но Flux оказался довольно сложным
и непонятным. Поэтому сейчас наиболее хайповое решение это библиотеква Redux. Она очень
простая, крутая и удобная.

Но в принципе есть и другие варианты, например библиотека Baobab.