Redux

Introduction

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger. You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies).

Key ideas

Redux is another turn of the screw around the pillars of Flux, but it avoids its complexity by extracting key ideas from Elm. Its fundamental concepts could be stated in the following way:

• The whole state of the application is kept in a tree at a single store.
• The only way to change the state is by emitting an action, which is a JS object describing what is happening.
• In order to specify the actions that change the state, pure reducer functions need to be written (reducers).

If compared to Flux, there is a very important difference, which is the fact that Redux does not have a dispatcher nor does it support several stores. On the contrary, there is a single store with a single reducer root function. As the application grows, instead of adding stores, the key is dividing reducers into smaller parts that operate independently in different parts of the state.

This architecture might seem to complex for small applications, but it is great for scalability and at the same time allows for developing with powetful tools that can detect a state mutation, its cause and consequences.

Scheme

The whole architecture of Redux revolves around a store which contains the app's state, the root reducers and a series of functions among which we are interested in dispatch the most. It is precisely this method the one that receives an action (in our case generated by an action creator function) and forwards it to the root reducer so it distributes it to its children and, among all the parts, a new state is generated.

Furthermore, there is a difference between "dumb" and "smart" componentes. "Dumb" components are the ones that simply generate a view from the state they receive. "Smart" components have access to the store and therefore can dispatch actions; they normally act as containers of the "dumb" components. As seen, this architecture makes the integration with React very easy due to the props mechanism in React, where "dumb" components receive only the information they need in order to render from the "smart" ones.

Future improvements

If needed, creation of more "smart" components (only one exists as for now) in order to reduce the components' complexity.