Redux : The Introduction of State Management

Introduction

Redux is predictable state container for java script app. We can use redux with many java script libraries and frameworks like angular, react etc. Redux is simply an implementation of the Flux pattern with some variation. Those variations actually make it easier to learn.

As the application grows, it becomes difficult to keep it organized and maintain data flow. Redux solves this problem by managing application’s state with a single global object called Store. Redux fundamental principles help in maintaining consistency throughout your application, which makes debugging and testing easier.

What is Redux??

Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to (and inspired by) Facebook’s Flux architecture, it was created by Dan Abramov and Andrew Clark.

Redux is a small library with a simple, limited API designed to be a predictable container for application state. It operates in a similar fashion to a reducing function, a functional programming concept.

Redux is a predictable state container for JavaScript apps. To rephrase that, it’s an application data-flow architecture, rather than a traditional library or a framework like Underscore.js and AngularJS.

Redux is used mostly for application state management. To summarize it, Redux maintains the state of an entire application in a single immutable state tree (object), which can’t be changed directly. When something changes, a new object is created (using actions and reducers).

Fundamental Principles

Single Source of Truth

The state of your whole application is stored in an object tree within a single store. As whole application state is stored in a single tree, it makes debugging easy, and development faster.

State is Read-only

The only way to change the state is to emit an action, an object describing what happened. This means nobody can directly change the state of your application.

Changes are made with pure functions

To specify how the state tree is transformed by actions, you write pure reducers. A reducer is a central place where state modification takes place. Reducer is a function which takes state and action as arguments, and returns a newly updated state.

Redux Structure

Redux has a single store which holds the application state. If you want to split your code on the basis of data handling logic, you should start splitting your reducers instead of stores in Redux

redux was inspired by Flux. Redux studied the Flux architecture and omitted unnecessary complexity.

Redux does not have Dispatcher concept.

Redux has an only Store whereas Flux has many Stores.

The Action objects will be received and handled directly by Store.

Redux — Data Flow

Redux follows the unidirectional data flow. It means that your application data will follow in one-way binding data flow. Redux reduces the complexity of the code, by enforcing the restriction on how and when state update can happen. This way, managing updated states is easy. We already know about the restrictions as the three principles of Redux.

• An action is dispatched when a user interacts with the application.
• The root reducer function is called with the current state and the dispatched action. The root reducer may divide the task among smaller reducer functions, which ultimately returns a new state.
• The store notifies the view by executing their callback functions.
• The view can retrieve updated state and re-render again.

Conclusion

Redux is gaining traction every day. It’s been used by many companies (Uber, Khan Academy, Twitter) successfully in production. Some developers might complain that there is a lot of overhead. Even though Redux might not be ideal solution for your app or framework, It highly recommend to use redux especially for React applications.