Flux pattern

Most frontend frameworks/libraries like Angular, React and Vue use a component based approach. This is great when it comes to reusability and flexibility. In larger apps this can, however, lead to new problems. One of them is a confusing and unstructured data flow. Since components are layed out in a tree structure propagating data changes to other components requires to traverse the tree up to the closest common parent and then down to the destination component again. If you have many destination components and many source components this can become a chaos pretty quickly. The following image demonstrates this and also shows why the flux pattern can be a good solution to this problem:

The flux pattern introduces a single source of truth called Store or State where all components receive their data from. There are other concepts in the above mentioned frameworks such as services (via DI) in Angular and hooks or mixins in React and Vue and in many scenarios they suffice. The flux pattern goes a step further and decouples querying data from performing updates.

The basic pattern consists of four parts. A Store which acts as single source of truth storing the application's data much like a database. The second part is of course the View which querys or subscribes to data changes in a reading fashion. Updates to the stored data can be achieved by dispatching actions, the third part of the pattern. Actions are just simple command objects (see Command Pattern). They can contain a payload instructing the fourth and last part of the pattern the Reducer how to update certain parts of the Store. Reducers are simple functions that receive dispatched actions and perform updates on the store. This way the View is completely decoupled from data handling in the background.

It is possible to use the pattern only in complex parts of an application, however, it is advisable to fully commit to the pattern if you choose to use it. Otherwise it will lead to much greater data flow chaos.

You don't need to implement the pattern yourself. There are many implementations for each frontend technology out there:

• Redux (React)
• NGRX (Angular)
• NGXS (Angular)
• Akita (Framework agnostic?)
• Vuex (Vue)

Sources: https://blog.codecentric.de/en/2017/12/developing-modern-offline-apps-reactjs-redux-electron-part-3-reactjs-redux-basics/