State management tools

There are many state management libraries out there, with the two most popular being Redux and MobX.

Redux

In Redux, you keep the state of your application inside an object literal that belongs to a store. When the state needs to be changed, an action describing what has happened should be emitted.

Then, you'd define a set of reducer functions, each responding to different types of actions. The purpose of a reducer is to generate a new state object that’ll replace the last one:

This way, updating the state no longer requires calling 20 different onChange functions.

However, you'd still need to pass the state via the props of many components. There’s a way to mitigate this through the use of selectors; but more on that later.

MobX

Mobx incorporates functional reactive programming principles, and uses observables as its stores:

You can tag entities (for example, objects and arrays) as observables using the @observable decorator. You can also tag some functions with the @computed...