React: Up & Running

Chapter 8. Flux

This final chapter introduces Flux, which is an alternative way of managing the communication between components and a way to manage the overall data flow in your app. So far you’ve seen how communication can happen by passing properties from a parent to a child and then listening to child’s changes (e.g., onDataChange). However, while passing properties this way, you may sometimes end up with a component that takes too many properties. That makes it hard to test this component and verify that all these combinations and permutations of properties work as expected.

Also, sometimes you end up in scenarios where you need to “pipe through” properties from a parent to a child to a grandchild to a great-grandchild, and so on. This tends to be repetitive (which is bad in itself), but also confusing and it causes an increased mental load on the person reading the code (too many things too keep track of at one time).

Flux is one way that helps you overcome these hurdles and maintain your sanity while keeping the flow of data in your app manageable. Flux is not a library of code, but more of an idea about a way to organize (architect) your app’s data. After all, in most cases, the data is what matters. Users come to your app to deal with their money, email, photos, or whatever it may be. Even if the UI is a little clunky, they can live with it. But there shouldn’t be any confusion on the state of the data at any time (“Did I just send $30 or didn’t I?”).

There are many open ...