Redux

Redux is an open source JavaScript library for managing application state.

It was created in June 2015 and it was inspired by Facebook’s design pattern: Flux.

What is an application state?

An application's state is roughly the entire contents of its memory. In more "normal" programming languages, the "state" of the program is all its global variables, static variables, objects allocated on the heap, objects allocated on the stack, registers, open file descriptors and file offsets, open network sockets and associated kernel buffers, and so forth.

source.

So an application state is constituted of a set of data used to maintain the web site functioning.

Why Flux?

Facebook engineers invented Flux as an alternative for MVC.

They needed an architecture that adapts to large-scale application where detecting changes and rendering them on the DOM becomes harder because dependencies between views and models are high and data flow between controllers and views is bidirectional.

How Flux works?

Flux proposes a unidirectional data flow. It proposes to save the application’s state in global stores that are modified only by actions and they are accessible by all application’s components. 

What is an action?

An action is a simple object that holds a type property and some specific data.

How stores are modified by actions?

When an action is triggered, it is passed to a dispatcher, which is a set of callbacks that are already registered by stores. So, when this action comes to the dispatcher, this last invokes the callbacks to propagate it to the appropriate store. This latter in return adapts itself basing on data and action's type.

Following a schema that represents Flux's data flow:

source: Flux official site.

Back to redux:

Redux adapts the same mechanism yet it proposes a simpler architecture.

What are the differences?

•  Instead of multiple stores, Redux uses one global immutable store.

Why is it immutable?

Instead of updating the state directly, Redux proposes to return back an updated copy which helps to keep track on state’s changes all along the application's use and thus easily do the debug.

• Also, Redux replaces the dispatcher (a singleton in flux) by a set of reducers:

What is a reducer?

Reducer is a pure function responsible on updating the state.

Why a pure function?

Let's start first by defining a pure function according to Wikipedia:

In computer programming, a pure function is a function that has the following properties:

1- The function return values are identical for identical arguments (no variation with local static variables, non-local variables, mutable reference arguments or input streams).

2- The function application has no side effects (no mutation of local static variables, non-local variables, mutable reference arguments or input/output streams).

So reducers can't modify states within the store (which is logic because they are immutable). Instead a reducer returns an updated copy.

• Another difference between Redux and Flux is that while this latter uses stores to define the logic to be executed based on the action, Redux writes this logic in the reducer.
• Also redux proposes the use of Effects:

Since reducers are pure functions, they cannot perform impure operations. Therefore effects are introduced, they are responsible on handling an action's side effects like async operations or generating random outputs.

For instance when an action needs to load from the database, modify it or delete data from it, its effect performs an API call trough an HTTP service and subscribes to this call to get the result back.

• Also redux introduces Selectors:

Selectors can be fed with arguments and they are responsible on retrieving data from the store. A selector is a pure function, it returns the same output basing on the same input. Hence selectors keep track of the latest arguments to provide later the same already fetched results, this mechanism is called memoization and it helps enhancing the application's performance.

This following schema represents Redux architecture:

Sample project

Finally you may find within this link a sample of Redux application developed with Angular-11.0.8 and NgRx framework for managing state.

This project displays shopping items that can be added to my-basket list.

In case the user selects the same item multiple times, the component which displays my-basket list will update the item's occurrences number.

Both Components displaying shopping items and my-basket items don't communicate. Instead they get their states' updates from the global store.