Redux

Redux - Concepts

January 29, 2022

 



Redux—A predictable state container for Javascript apps.

Redux enables you to build apps that behave consistently. The apps built using Redux are independent of the environment it runs in.

Apart from the ones mentioned above, there is a multitude of features that Redux caters its users with. It equips the developers with time-travel debugging, flexibility to work with any UI layer, and a wide array of add-ons to choose from.

Prerequisites

You should be familiar with: 

Redux Introduction

  • Redux is a State Management JavaScript Library. 
  • A Predictable State Container for JavaScript Apps. 
  • Predictable = able to be known 
  • State Container = global state for entire app(store) 
  • JavaScript Apps = React, Angular, Vue etc., 
  • It is most commonly used with libraries such as React or Angular for building user interfaces. 
  • Redux was created by Dan Abramov and Andrew Clark in 2015.

Are there any similar libraries?

  • Yes, we have few more libraries similar to Redux which are Flux and MobX. 
  • Flux and MobX supports multiple stores. 
  • Redux is more popular among three.
  • If you already learned React then Redux will definitely added advantage to your resume

Why Redux ?

why redux


Example Scenario




Redux Core Concepts 



Redux Practical

  • Create A Simple Node Project
    npm init -y

  • Install Redux Package
    npm install redux

  • To see the preview
  • node index.js

        // const { createStore, combineReducers,applyMiddleware } = require("redux")
    // const logger = require('redux-logger').default;
    // const thunk = require('redux-thunk');
    // const BUY_LAPTOP="BUY_LAPTOP";
    // const BUY_MOBILE="BUY_MOBILE";

    const {createStore} = require("redux")


    //State

    const initialState={
      numOfLaptops: 100
    }


    // Action

    const buyLaptop=()=>{
      return {
        type:"BUY_LAPTOP"
      }
    }


    // Reducer

    const reducer = (state=initialState,action)=>{
      // if(action.type==="BUY_LAPTOP"){
      //   return {numOfLaptops: state.numOfLaptops-1}
      // }else{
      //   return state
      // }

      switch (action.type){
        case "BUY_LAPTOP":
          return {numOfLaptops:state.numOfLaptops-1}
        default:
          return state;
      }
    }

    const store = createStore(reducer);
    // console.log(store);

    store.subscribe(()=>{console.log(store.getState())});
    store.dispatch(buyLaptop());
    store.dispatch(buyLaptop());
    store.dispatch(buyLaptop());
    store.dispatch(buyLaptop());