Redux Basic Indroduction

1. What is Redux?

Redux is a predictable state container for JavaScript application. The state of your application is kept in a store, and each component can access any state that it needs from this store.

2. Why is Redux?

Most libraries like React, Angular, etc. are built with a way for components to internally manage their state without any need for an external library or tool. It does well for applications with few components, but as the application grows bigger, managing states shared across components becomes very hard.

In an app where data is shared among components, it might be confusing to actually know where a state should live. Ideally, the data in a component should live in just one component, so sharing data among sibling components becomes difficult. So that is why redux is come up with solving these issues by managing states in theapplication.

3. How Redux works?

  • Create the store.
const store = createStore(mathsReducer, 1);

1 is the default state.

  • By adding the reducer to store,we tell the store who responsible for changing the state. Here reducer is responsible for changing the state.

One reducer typically handle multiple actions. reducer always has to return state.

  • Then dispatch an action. This is how to dispatch an action.
  • dispatch action handle by the reducer. Reducer has switch statement and check the action type and return the new state.
  • After that new state is stored in the store.
  • subscribe method inform that state is changed.
store.subscribe(() => {console.log("Store updated", store.getState());});

Here this is the simple code to how the states are changed by redux.

In this example, same state is changed. Not created different states for every dispatchers.

In this example we are going to create new state object for every dispatchers.(immutable states)

4. Multiple reducers

Here we are going to use multiple reducers. Redux is support for multiple reducers. Here we are using combineReducers from redux library.

Important: Must use unique action types when we are using also multiple reducers. We are using one store. If we use same action type for different action, store couldn’t identify which action should be execute.

5. Redux Middleware

Middleware is executed before handling the action(before state is changed).

Here we are using applyMiddleware from redux library.

6. Redux Logger

In redux, there is nice user friendly logger called “redux-logger”. It is also library.

import logger from “redux-logger”;





Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React File Uploads to Rails

Convert static site to pure React js application

Dart — Tutorial And General Overview

Objects and its Internal Representation in JavaScript

How to add Tab Navigation or Simple Navigation or Drawer Navigation in React Native

Thank you, Angular

The goodness of GitHub Pages, VuePress, and Markdown

How to run a private Ethereum network alongside a hot-reloading NodeJS application using Docker…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pramod Shehan

Pramod Shehan

More from Medium

Real Life Example — Recursive Components

How to create nested dynamic routes using React Router v6

Auto select Option with Lable and Value in React JS using React Select

JavaScript Utility Methods in Detail