BLOG

Redux Internals - a guide to redux for beginners

Posted on 21th March | Author - Neha Sharma

Redux is the state management library popularly use with React JS but can be used with the other MV* frameworks/libraries too.

“Redux is a predictable state container for JavaScript apps.”

It was developed by Dan in 2015 and got its popularity due to it’s less size which is just 2Kb as well as in comparison to Flux architecture is it simpler.

For the traditional developer , Redux concept could be little confusing as the redux change the way developer used to create the applications. Which is totally fine because you are not the only one who is getting confused with the redux and its associated terms - actions, reducers etc. Many developers who start are not able to get their head on same. In this blog post, I’ll discuss Redux, it's jargons and usage/advantages of different parts of Redux.

When to use Redux?

Redux can be used with any view application - angular, vue, polymer, react. Redux is mostly getting used with the Reactjs. Whenever you have a project in which you want to play with the state use redux. Avoid using redux for small projects as it could look like overburden for a developer.

Advantages of using Redux:

  • Maintainability
  • Testing
  • Ecosystem
  • Data Flow

State is just a plain object holding the Data which is stored for your application at the current point of time. It will get change as per the user interaction.

Building blocks of Redux:

createStore :

createStore as name says it creates the redux store. There should be only 1 store in your app. It takes - initial state, reducer and optional middleware. It returns an object that hold the state of your whole app. The only way to change the state is by dispatching actions. You can subscibe to its changes to its state.

jslovers-createStore code example
action creators code example

Store :

Store is the one place where your whole data is. It’s an object that holds whole application’s state. Redux has helpers methods through which you can access the data, register the listeners and dispatch the actions.

You need to create store in your application by using import { create }. Whenever you need to use the store in your JS applications you need to use subscribe method on your store

  • Do not make multiple stores in your application
  • To apply multiple store enhancers, you may use compose().
  • The only way to change the state inside store is to dispatch an action on it.

3 principles:

  • Pure functions
  • Readonly
  • Single source of truth

Methods of Store :

  • getState()

    return the current state tree of your app. It is equal to last value returned by store’s reducers

  • dispatch(action)

    Dispatch the action. The only way to trigger the state change

  • subscriber(listener)

    Adds a change listener. It is called when a actions is dispatched ot some part of state tress changes . You call getState() to read the current state tree inside the callback. It is low-level API and you can use it with Reactjs

  • replaceReducer(nextReducer)

    High and advance level API. When you want to replace the reducer.

Dispatch

Calling actions in the app is simple dispatch(actionCreators());

Actions:

“Action returns the new state via reducers.”

Once your JS application is ready, identify all the events your app can have such as: click on the button, ajax call, inputting some data, form submit etc. These all are the actions. Basically, actions are any event which can be any event either user initiated or due to any other reason/mode.

jslovers-action code example
action code example

In Redux - actions are the objects with two key - Type and payload.In redux ,Store listens on to actions and return new state based on action referred.

Action Creators

actionsCreators are the pure function which return the actions. Hence you can say that action wrap inside the action Creators

PS: Make separate file for each action

jslovers-action creators code example
action creators code example

Reducers

Reducers are the pure function that takes - current state of the application and action. It returns a new state. Reducers take the action creators and in the switch case, we start writing the logic code. The problem in redux’ reducers is it is not self-intelligent to understand which actionCreators is initiated by the users hence it runs all the reducers...hence we need to use a switch case to match the action. And return the state.

jslovers-reducers code example
reducers code example

In complex application use { combinereducers}. It combines all the reducers into single index reducers. Every reducer is responsible for its own state and state parameter is different for every reducer.

Resources:

More about Redux

In Next part we will look into combineReducers, compose, applyMiddleware and few more...

Want to know more about me? Follow me at : Twitter, Linkedin, Medium