Redux Action & ActionTypes

Actions:

    An action is just a plain javascript object that describes what just happened. based on the type of action reducer just comes to know what properties it should update.

    Let’s understand actions through code,

import {createStore} from 'redux';

const init={
    user:[]
}
function reducer(state=init,action){
    
    if(action.type === 'USER_ADDED'){
        
        return {
            ...state,
            user:[...state.user,{id:action.payload.id,
            name:action.payload.name}]
        }
    }
    else
        return state;

}

let initialState;
const userString = localStorage.getItem('user')

if (userString) {
  initialState = {
    user: JSON.parse(userString)
  }
}

const store= createStore(reducer,initialState);

store.subscribe(()=>{
   console.log("store",store.getState());
});
export default store;

import React from 'react'
import store from './store';
function App() {
    console.log("store.getState>>>",store.getState());
    store.dispatch({
        type:'USER_ADDED',
        payload:{
            id:1,
            name:'webdev99'
        }
        });
    return (
        <div>
            Redux Store
        </div>
    )
}

export default App

    Here ,below is the action we have used in above code in dispatch method.

{
        type:'USER_ADDED',
        payload:{
            id:1,
            name:'webdev99'
        }
}

---

ActionTypes:

    When building real-world applications with redux we often introduce the additional building blocks that make our code more maintainable.

For Example:
     In the below redux example, we have only two features add the user(USER_ADDED) & remove the user (USER_REMOVED)

store.dispatch({
 type:"USER_ADDED",
 payload:{
    id:1,
    name:'webdev99'
 }
 });
  
 store.dispatch({
 type:"USER_REMOVED",
 payload:{
     id:1
 }
 }); 

const init={
    user:[]
}
function reducer(state=init,action){
    
    if(action.type === 'USER_ADDED'){
        return {
            ...state,
            user:[...state.user,{id:action.payload.id,
            name:action.payload.name}]
        }
    }
    else if(action.type === 'USER_REMOVED'){
          return state.filter(user=>user.id!== action.payload.id); 
    }
    else
          return state;

}

    Now in the above code, we have the action USER_ADDED & USER_REMOVED.suppose in the future we decide to rename the action type USER_ADDED to USER_CREATED, In such a case there are multiple places where we have to update and if we don’t do so then we encounter a bug.

    So how to fix this problem:

 export Const USER_ADDED="USER_ADDED"
 export Const USER_REMOVED="USER_REMOVED"

    Now we can dispatch the actions using the above action types …

import * as actions from '.actionTypes';
  
 store.dispatch({
 type:actions.USER_ADDED,
 payload:{
        id:1,
      name:'webdev99'
 }
 });
  
 store.dispatch({
 type:actions.USER_REMOVED,
 payload:{
     id:1
 }
 }); 

    We can use the same action types in the reducer function to avoid future bugs when the action name gets changed.

import * as actions from '.actionTypes';

const init={
    user:[]
}
function reducer(state=init,action){
    
    if(action.type === actions.USER_ADDED){
        return {
            ...state,
            user:[...state.user,{id:action.payload.id,
            name:action.payload.name}]
        }
    }
    else if(action.type === actions.USER_REMOVED){
          return state.filter(user=>user.id!== action.payload.id); 
    }
    else
          return state;

}

    This is all about actions & actionTypes 🙂

    If you guys feel I missed something feel free to add in comments,

Thank you,