Hey everyone.
This might get lengthy and wordy, so I apologize in advance. I feel like my thoughts are all over the place and I am having difficulty putting them into words. So I will do my best.
I’ve been doing a lot of reading on React JS lately because I figured I might as well get a head start on it now. My React readings stemmed off into other topics like the Flux architecture (Redux in particular) and other best practices like “smart” and “dumb” components and passing state from the top down. I was also particularly interested in the concept of a global store that would represent the entire state of the application.
I also finished reading the first draft(s) of the Meteor Guide, and it seems that it was influenced by many of the “React-like” design principals; in particular, how smart parent templates will retrieve data and pass it into dumb templates.
It’s all very interesting and all the concepts are very sound, but I couldn’t help but feel confused the more I read because I feel like we were already doing things like this in the early days of Meteor development before we decided this way was no good and best practices were changed… and now we’re kind of going back.
I am likely not being very clear right now, so I will break my thoughts/questions down into to two main topics:
Where to subscribe to data, and how to pass this data around
The Meteor guide mentions subscribing to data close to where you are going to use it; ie. subscribe to the data in the onCreated hook of your template, or with the React getMeteorData mixin. This makes sense to me; if you have a Follow button component/template, that button would be responsible for getting that data it needs to function properly. This component could then be put anywhere you need it.
But later on, the examples described the pattern of subscribing to all of the data you need on the root/parent smart component that would represent the “page”, and that component would pass down the data to all of the dumb child components. This seems to contradict the earlier point because you are no longer keeping the data subscription close to where it is being used. Imagine if that Follow button is 5 or 6 components deep. Furthermore, this seems very similar to the pattern of subscribing to data on the router like we were doing with Iron Router, before we all decided that was a bad idea. I fail to see the difference between subbing to everything on the router and providing a data context through that versus subscribing to that same data in the root page component/template. I mean, the page component is dependent on the route anyways and you are accomplishing the same thing. What am I missing here?
A Flux-like store to represent the state of the application
We used to use global Session variables to share state between templates, but we decided that was bad and hard to manage. We then came up with the pattern of putting reactive-vars or reactive-dicts inside components to represent these session/state values. This would keep things easier to manage and would not pollute the global scope.
Now, we have a lot of discussion about the Flux architecture, which has the concept of a global store that represents the state of the application. This state would be accessed at the root component, and then passed down to all the child components. The Meteor Guide has some allusions to this same concept in a few of the examples. This sounds like a very cool concept. Some of that time traveling stuff to help with debugging sounds incredible.
But I also feel like we were already doing something similar with Session, before we all decided it was bad idea and the best practice was putting those reactive values in the template. What is the different between Session and a Flux-like store? Could we not do the same with Session and put our “store” inside of that? We could even strictly access that Session inside the root/parent “page” component and pass the properties down to the child components. Why was having Session represent the state of the application considered bad before, but Flux is considered good now? Again, what am I missing here?
I am just really confused. As I am studying this stuff, it all makes sense and sounds amazing as I am reading it. But as I am working with these concepts, they seem to contradict each other and I am struggling with understanding what the “right” way to do things is. Both concepts sound really good! I hate that feeling during development where it feels like I am doing things the wrong way. I suppose it hasn’t clicked yet.
Any help would be appreciated. Thank you for your time.