Redux – Part 1 – The Principles of Redux

redux

What is redux?

Redux is defined as predictable state container for JavaScript applications. It is mostly used with React but it can also be used with Angular and AngularJs or any other framework. I will focus on that in my upcoming Angular with Redux series.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. You can use Redux together with React, Angular, or with any other view library…

It is used for state management and data flow.  As Dan Abramov, creator of Redux said:

State management is absolutely critical in providing users with a well-crafted experience with minimal bugs.

It's also one of the hardest aspects of a modern front-end application to get right.

Redux provides a solid, stable and mature solution to managing state in your React application. Through a handful of small, useful patterns, Redux can transform your application from a total mess of confusing and scattered state, into a delightfully organized, easy to understand modern JavaScript powerhouse.

Redux have great development tools Redux DevTools. You can check them here https://github.com/reduxjs/redux-devtools

 

When to use Redux?

To know when to use it, you should first understand how it works on a basic level.

Basically, the whole state of application is stored in one place. State is available to all other components directly.

Whole parent-child mess is avoided. For example, if you have two components that share same data than you need to make those components child components and move that data to parent component. In AngularJS you will than use bindings, in Angular @Input and @Output to work with that data in child components. But what if those child components are not siblings, but far away from each other? Redux solves that problem. Any component, from anywhere can access state.

In Redux we have predictable state updates. They make it easier to understand how the data flow works in the application.

Having one state makes it really easy to handle data persistence on page refresh.

In general, use Redux when you have reasonable amounts of data changing over time, you need a single source of truth, and you find that approaches like keeping everything in a top-level React component's state are no longer sufficient.

The Principles of Redux

 

The Single Immutable State Tree

Whole state of your application is represented as single JavaScript object called State or State Tree. It is a minimal representation of data in application. Complexity of application is not important. All mutations and changes to the state are explicit. Explicit mutation means that for specific input you will always get same output. This ensures reliability and predictability because for same input and action user will always get same output. It also means that you can easily track all your changes.

Redux1_stateObject

Image above shows state tree and all the changes. At the beginning we have starting state. It is a simple JavaScript object with two properties. As we do interaction (with actions, I will explain that in next principle) state object is changed. With Redux we can easily track down all the changes.

Redux2_stateObjectActions
State tree is redundant

You can’t modify or write to state tree. To make change you need to dispatch an Action. Action is also a plain JavaScript object that describes the change. We can say that Action is minimum representation to the change of data (which is stored in state). Only requirement of Action is that it has type property (string is highly recommended).

For example, let say that we have a number and increment and decrement button. When we click on increment (+) button we dispatch action with type INCREMENT and when we click on decrement (-) button we dispatch action with type DECREMENT.

inc
Redux3_Actions

In more realistic scenarios action will have other properties like id, new value, etc. Base principle is that component don’t need to know what’s happening it just need to dispatch action.

To conclude: Action is JavaScript object that describes in minimum way what changed in application. In  Redux application only way to get data is trough Action regardless if it’s initiated by user action or network response.

Reducer

State mutations need to be described as pure functions that takes previous state and action and return new state and this function needs to be pure.

State given to that function can’t be modified. Only retuned value is modified depending on action dispatched. That function is called the Reducer.

We distinct pure and impure functions. Pure functions return new value that depends only on the value of an arguments they are taking in and not changing the arguments. They just calculate the new value based on arguments. If you call pure function with same arguments, you will always get the same result. They are predictable.

Examples of pure functions:

function increase(x) {
     return x++;
}

function square(x){
     return x*x;
}

function increaseAll(items){
    items.map(increase);
}

Last one returns new array with map. It will not change argument.

Impure function can override values passed in, call database or network, can have side effects.

Example for impure functions:

 

Function increase(value){
    updateValueInDatabase(value);
    return value++;
}

vucakivan Author

Leave a Reply

Your email address will not be published. Required fields are marked *