Today I started work late since I was feeling ill in the morning. That meant that my team mate had already started working on what I planned to do today, which was creating a new, cleaner-looking version of the user guide. I took the time today to learn more about React and frameworks that use it. This was something I’ve been meaning to do lately anyways when time allowed. Most people right now don’t create React apps, they create apps with the Flux or Redux frameworks, which use React as their “view” layer.
React enforces a functional style of programming, which is great. It helps you avoid issues with some state existing here, other state existing there, and now you have to make sure the two places don’t change each other’s state in ways that screws up your app. You do this with React components by making the top-level component in a tree of components hold the state that gets accessed by those lower-level components. You hoist the state as high as it needs to go. Then, the values in that state flow down (usually as props) when they’re changed. The child components get informed of that new state (through their props) and they may or may not re-render. This is “unidirectional data flow”.
Frameworks like Flux and Redux take this concept even further. The only place any state is allowed to exist is in a “store”. When the store is changed, the components react to that change (using a sort of pubsub/observer pattern). The components reaction fire “actions”, which then may end up changing the store’s data. And that may cause components to react to that change. If reading this makes you picture a circle in your head, you’ve got the right idea.
React is data flowing in a line. Flux is actions flowing in a circle.
At least that’s what I’ve gathered so far… I have more learning to do to learn how this benefits our apps as they scale. We probably won’t end up using any of these frameworks for our Visual Analysis Tool now that we’ve started building it without them, but I think it’s still a good idea for me to get familiar with them.