The new context API that comes with React 16.3 is pretty neat. It was built in the render props style trending over these last months. Let’s explore it:

It’s pretty nice, right? Let’s go further with Flux-like implementation.

What’s Flux?

This talk from the excellent Jing Chen has revolutionized how we think about our applications today. If you want to know what Flux is as a concept, take a look here.

A basic Flux representation

One library has democratized this concept: Dan Abramov’s Redux and its legendary time travel demo at React Europe 2015.

Implementation

With the createContext() API example above, we already have the unidirectional Store → View in place.

What we need are actions and dispatchers to dynamically update the store. What if our dynamic store was just the state of a root React component?

We have just passed state and actions as values of the provider. And now we can get it with <Consumer />.

I created a library to have everything we need to use this data flow easily while keeping great performance.