yash kumat

Posted on Jan 12, 2022

Redux Basics

#redux #javascript #react #webdev

This is a guide to understand and use redux in your project in easiest way.

Table of Contents

About Redux

1. Reducer - Function that takes current state and action (type of action + data) as an argument and return updated state.

2. Action - Object that has type of action (basically name) and data to be passed to a reducer function.

3. Store - Give us different methods to fetch or modify current state

  * getState() - Returns current state

  * dispatch() - call reducer function by passing action

  * subscribe() - listen to state change

  npx create-react-app app-name

  npm install redux

This is how you can use redux in your application

Create reducer.js file and write function that takes state and action and retuns updated state.

function reducer(state =[], action){
  if(action.type === "type){
    <!--  Some Logic    -->
    return updatedState
  }
}

import { createStore } from 'redux'

const store = createStore(reducer);

export default store;

Now you can use store variable to getState or dispatch (take action) or subscribe (listen to state change), etc
- getState

  store.getState()

  store.dispatch({
      type: "type",
      payload:{
          data: "data"
      }
  })

  store.subscribe(()=>{})