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.

Intro:

Redux is a library which is used to maintain the state of an application at the application level. It reduces the complexity of managing different states of the components when the app gets comparatively larger and it provides the ability to maintain the state of different components efficiently.

Why use Redux?

Redux takes away some of the hassles faced with state management in large applications. It provides you with great developer experience and makes sure that the testability of your app isn’t sacrificed for any of those.

As you develop React applications, you may find that keeping all your state in a top-level component is no longer sufficient for you. You may also have a lot of data changing in your application over time. Redux helps solve these kinds of problems.

For example, in larger apps with a lot of moving pieces, state management becomes a huge concern. Redux ticks that off quite well without performance concerns or trading off testability.

Principles of Redux:

  • Single source of truth – This means that there is only one store that has a giant object, called application state, for the entire application which resides in the store.

  • A state is read-only – The only way to change the state is dispatching an action.

  • Changes are made with pure functions/reducers – Dispatched actions will be received by the reducer which modifies the state in the store if required.

Building Blocks of Redux:

  1. Store

  2. Actions

  3. Reducers

Store:

Store is the object that holds the application state and provides a few helper methods to access the state, dispatch actions, and register listeners. The entire state is represented by a single store. Any action returns a new state via reducers. That makes Redux very simple and predictable.

Actions:

Actions are plain JavaScript objects that describe WHAT happened but don’t describe HOW the app state changes. Actions send data from the application (user interactions, internal events such as API calls, and form submissions) to the store. The store gets information only from actions. Internal actions are simple JavaScript objects that have a type property (usually constant), describing the type of action and payload of information being sent to the store.

Reducers:

Reducers are pure functions that define HOW the app state changes. In other words, they are used to recalculate the new application state or, at least a part of it.

Whenever we dispatch an action to our store, the action gets passed to the reducer.

The reducer function takes two parameters: the previous app state, the action being dispatched, and returns the new app state.

Reducers specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe WHAT happened, but don’t describe HOW the application’s state changes.

Redux

Benefits Of Redux:

  1. Redux makes the state Predictable.

    In Redux, the state is always predictable. If the same state and action are passed to a reducer, the same result is always produced because reducers are pure functions. The state is also immutable and is never changed. This makes it possible to implement arduous tasks like infinite undo and redo. It is also possible to implement time travel — that is, the ability to move back and forth among the previous states and view the results in real time.

  2. Maintainability.

    Having a predictable outcome and strict structure makes the code easier to maintain.

  3. Organization.

    Redux is stricter about how code should be organized, which makes code more consistent and easier for a team to work with.

  4. Developer tools.

    Developers can track everything going on in the app in real time, from actions to state changes.

  5. Ease of testing.

    It is easy to test Redux apps since functions used to change the state of pure functions.

  6. State persistence.

    You can persist some of the app’s state to local storage and restore it after a refresh. This can be really nifty.

  7. Server-side rendering.

    Redux can also be used for server-side rendering. With it, you can handle the initial render of the app by sending the state of an app to the server along with its response to the server request. The required components are then rendered in HTML and sent to the clients.

Conclusion:

Redux is gaining traction every day. It’s been used by many companies (Uber, Khan Academy, Twitter) and in many projects (Apollo, WordPress’ Calypso), successfully in production. Basically Redux is all about managing state. All we need to do is dispatch an action, which will cause it to go to all the different reducers, and the reducers will produce some amount of data as state in the store.

References:

Categories : React JS, Redux, Technology