Hi, I have just started learning React.js on Meteor and I wanted to know which is the best ‘practice’ or ‘way’ to communicate between React components that are not parent-sibling or sibling-parent.
On the React documentation they talk about making a ‘global event system’ link, and I would just like to know how can I make or add one in Meteor, also I would like to know what any of you guys use on the real world to achieve this, thanks in advance!
Also when I was looking how to do this I read a lot ab out Flux I would like to know if anyone has added it to a Meteor project and if so, how.
I use a popular flux architecture called redux. Becareful as there is a learning curve involved with it but it is basically the de-facto architecture within the react community.
I think the facebook team uses relay and there are definitely other frameworks out there.
I’m not expert by any stretch as I’m on the learning curve too. I did create a simple chat app that required communication between two non-related components.
I found this article How to communicate between React components
Look at the section called “Help me, my components are not related!” about 3/4 down the page.
It provides a straightforward example that seemed to work.
Great link, I read id the other day but which pattern and library do you actually used por your project? And how do you added it to Meteor?
It basically tells you to use Tracker :))
We’re using Redux, as @mordrax says it does have a learning curve, but it’s worth it. To me it feels a lot cleaner (and more like the React way) to separate out your state and to then render your components based on your state, rather than trying to communicate between your components.
There’s a load of learning resources for Redux with Meteor at the bottom of the read me for the Simple CRM example I did.
Definitely look at the How we Redux series and also look at the example branch of @ffxsam’s excellent Meteor boilerplate.
I went down the simple Publish/Subscribe route, using the js example.
I didn’t extend the object in the end, basically because I didn’t know how to, so EventEmitter became a global.
On the component that will perform the action when the event is raised, I set the subscribe code in componentWillMount
componentWillMount(){
EventEmitter.subscribe("myEvent",this.onEventCallThisFunction);
},
The component raising the event raised it on a button click.
EventEmitter.dispatch("myEvent", theDataToTransmit)
This was my first attempt at javascript/react/meteor etc so I’m sure it could be implemented much better.
As Tom mentioned we’re now using Redux, however I haven’t yet had to use it in this scenario.
Just came upon this interesting stat from gaearon (Redux creator):
In January 2016, every second npm install react also included react-router, and every third npm install react also included Redux.
Source: https://github.com/reactjs/redux/issues/1392
To further strengthen the argument of have a look at Redux, here’s a blog about using Redux with Angular 2: https://medium.com/google-developer-experts/angular-2-introduction-to-redux-1cf18af27e6e#.k8c42m9s2
The whole architecture of Redux is actually not related to React even though it’s been popularised by it. There are actually people using it with NodeJS if I recall correctly and I’m sure it will lend itself well to Angular.
The concept is the same, one global state by which different parts of the application access through triggering actions on it.