Redux starter and Redux toolkit

Redux is the easy way to have data stored on the application state, this helps us to manage the states. Redux toolkit simplifies the process of redux operation

things need for redux

• Action

• Reducer

• Store

steps:

Designing the store

listing all the action (what to do )

creating reducer(how to do )

creating redux store

Step 1- Design Store structure

we can store the data in array data structure, we can create the object in real world

[
    {
        id:1,
        task:"design Store"
        completed: false
    }
]
//task as object 
{
tasks:[
    { 
       id: 1,
       task: "design Store"
       completed: false
    },{...}
    ],
    employees:[ {...},
                {...}
        ]
}

Step2 Listing Action

Every action has a type

//action.js
export const addTask=()=>{
return {
    type: ADD_TASK
    task: "new task"
    }
}

export const removeTask=()=>{
return {
        type:Remove_Task
         id: 1
    }
}

Step3 Reducer

reducer is pure function, it gives us process to do some operation

//reducer.js
let id=0;
function reducer(state=[] , action){
if(action.type=="Add_task"){
    return [
    ...state,
            {
                id:++id;
                task:action.payload.task,
                completed: false
            }
        ]
}
else if(action.type=="remove type"){
           return state.filter (task=>task.id !=action.payload.id)
            }
        return state;
}

we can also use switch a switch case

//reducer.js
let id=0;
function reducer(state=[] , action){
switch(action.type){
   case "ADD_TASK":
       return [
           ...state,
         {
                id:++id;
                task:action.payload.task,
                completed: false
            }

     case "REMOVE_TASK":
       return state.filter (task=>task.id !=action.payload.id)
    default: 
       return state
        }

}

Create a Redux Store

//store.js
import {legecy_createStore as createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)
export default store

to view the store:

//index.js
import store from "./store"
console.log(store)

Dispatching the action from the reducer

for that we have to first modify the action

//action.js
export const addTask=(task)=>{
 return {
            type:ADD_TASK,
            payload:{task:task}
        }
}

export const removeTask=(id)=>{
 return {
            type:REMOVE_TASK,
            payload:{id:id}
        }
}

Now let's use in index.js

//index.js
import store from "./store"
import {addTask, removeTask} from  "./action"

store.dispatch(addTask("task1");
console.log(store.getState());

store.dispatch(removeTask(1);
console.log(store.getState());

---

ActionType

to remove the hassle of editing type at two places, we will create actionTypes.js

//actionTypes.js

export const ADD_TASK="ADD_TASK"
export const REMOVE_TASK="REMOVE_TASK"

Now change the reducer-

//reducer.js
import * as actionTypes from "./actionTypes"

let id=0;
function reducer(state=[] , action){
switch(action.type){
   case actionTypes.ADD_TASK:
       return [
           ...state,
         {
                id:++id;
                task:action.payload.task,
                completed: false
            }

     case actionTypes.REMOVE_TASK:
       return state.filter (task=>task.id !=action.payload.id)
    default: 
       return state
        }
}

Do the same in action.js

"ADD_TASK" -> actionType.addTask

---

Subscribe and Unsubscribe in Redux

//index.js
import store from "./store"
import {addTask, removeTask} from  "./action"

const unsubscribe=store.subscribe(()=>{
    cosole.log("Updated",store.getState())
})

store.dispatch(addTask("task1");
store.dispatch(addTask("task2");
console.log(store.getState());
unsubscribe();


store.dispatch(removeTask(1);
console.log(store.getState());

---

Exercise 1: Mark "task2" as completed task

1. actionType(declaration)->reducer(logic)-> action(mapping)->index(dispatching)

2. Go to actionType.js and define a variable

//actionType.js
export const ADD_TASK="ADD_TASK"
export const REMOVE_TASK="REMOVE_TASK"
export const TASK_COMPLETED="TASK_COMPLETED"

1. Head to reducer file and add case

    //reducer.js
    import * as actionTypes from "./actionTypes"
   
    let id=0;
    function reducer(state=[] , action){
    switch(action.type){
       case actionTypes.ADD_TASK:
           return [
               ...state,
             {
                 id:++id;
                 task:action.payload.task,
                 completed: false
                }
             ];
   
         case actionTypes.REMOVE_TASK:
           return state.filter (task=>task.id !=action.payload.id)
   
         case actionTypes.TASK_COMPLETED:
           return state.map(task=>task.id=== action.payload.id
                ?{...task, completed:true}:task
            );
   
        default: 
           return state
            }
    }
   

   1. Go to action.js

       import * as actionTypes from "./actionTypes";
       //action.js
       export const addTask=(task)=>{
        return {
                   type:actionTypes.ADD_TASK,
                   payload:{task:task}
               }
       }
      
       export const removeTask=(id)=>{
        return {
                   type:actionTypes.REMOVE_TASK,
                   payload:{id:id}
               }
       }
      
       export const completedTask=(id)=>{
        return {
                   type:actionTypes.TASK_COMPLETED,
                   payload:{id:id}
               }
       }
      

2. go to index.js and dispatch that task2

//index.js
import store from "./store"
import {addTask, removeTask, completedTask} from  "./action"

const unsubscribe=store.subscribe(()=>{
    cosole.log("Updated",store.getState())
})

store.dispatch(addTask("task1");
store.dispatch(addTask("task2");
console.log(store.getState());
unsubscribe();


store.dispatch(completedTask(2));
store.dispatch(removeTask(1);
console.log(store.getState());

Read part 2: Redux thnunk and API calls