Creating REDUCERS

 WE CREATE REDUCRES BASED ON SLICES.

CREATE A REDUX STATE SLICE , 

CREATE A NEW FILE  PATH: src/features/todo/todoSlice.js

ALL THE REDUCERS RELATED TO THE TODOLIST ARE CREATED HERE.

WE FOLLOW THE DOC OF REDUX TO CREATE A REDUCER FUNCTION.

WE START WITH IMPORTING AND WE WILL CREATE AN INITIAL STATE. IN THE INTIAL STATE todos IS AN ARRAY IN WHICH THE PROPERTIES ARE SENT AS AN OBJECT.

TO CREATE SLICE WE USE THE FUNCTION, createSlice() IN WHICH name  , INITIAL STATE, REDUCERES ARE SENT IN THE FORM OF AN OBJECT.

AS WE ALREADY KNOW, REDUCERS INCLUDE TWO PARAMETERS STATE AND ACTION.

HERE, ACTION IS NOT WRITTEN IN THE FORM OF CODE, IT IS IMAGINED THAT PAYLOAD IS GIVEN.

ADD_TODO

TO GENERATE AN ID, WE USE NANOID AN IN-BUILT TOOL IN REDUX.

HERE, UNLIKE REACT WHERE WE NEED TO DE-CONSTRUCT THE ARRAY TO ADD A NEW FIELD [...obj, newTodo] WE CAN DIRECTLY PUSH THE ELEMENT INTO THE ARRAY.

REDUX SUPPORTS DIRECT MUTATION.

REDUX TOOLKIT LET'S YOU WRITE SIMPLER IMMUTABLE UPDATE LOGIC USING MUTATING SYNTAX.

DELETE_TODO

TO DELETE , WE WOULD TAKE THE ID OF THE ITEM AND BASED ON THAT DELETION IS PERFORMED. ID IS SENT IN THE FORM OF action.payload  

WE USE FILTER METHOD , AS IT RETURNS A NEW ARRAY AND DELETION IS PERFORMED BASED ON THE CONDITION.

state.todos.filter((todo) => todo.id !== action.payload)

WHERE , EACH ITEM WOULD BE VERIFIED THROUGH IT'S ID AND WHEN ID MATCHES WITH THE REQUIRED ITEM'S THAT NEEDS TO BE DELETED IT IS NOT ADDED TO THE ARRAY BY FILTER METHOD  AND SO THE DELETION IS PERFORMED.

MARK AS DONE:

THE ID IS CHECKED AND WHEN MATCHED WITH THE CONDITION ISDONE IS SET TO TRUE(isDone: true) . HERE WE USE MAP METHOD AS WE ARE CHANGING (MODIFYING) THE ARRAY. 

NOW, ALL THESE REDUCERS ARE EXPORTED USING ACTION CREATORS.

ACTION CREATORS ARE THE FUNCTIONS THAT CREATE ACTION OBJECTS.

REDUX TOOL KIT AUTOMATICALLY GENERATES ACTION CREATORS.

import { createSlice, nanoid } from "@reduxjs/toolkit";

const initialState = {

  todos: [{ id: "abc", task: "add Todo", isDone: false }],

};

export const todoSlice = createSlice({

  name: "todo",

  initialState,

  reducers: {

    addTodo: (state, action) => {

      const newTodo = {

        id: nanoid(),

        task: action.payload,

        isDone: false,

      };

      state.todos.push(newTodo);

    },

    deleteTodo: (state, action) => {

      //action.payload

      state.todos = state.todos.filter((todo) => todo.id !== action.payload);

    },

    markAsDone: (state, action) => {

      state.todos = state.todos.map((todo) => {

        if (todo.id === action.payload) {

          todo.isDone = true;

        }

      });

    },

  },

});

export const { addTodo, deleteTodo, markAsDone } = todoSlice.actions;

export default todoSlice.reducer;

NOW THE REDUCERS ARE EXPORTED TO THE STORE.

IN STORE.JS

import { configureStore } from "@reduxjs/toolkit";

import todoReducer from "../Features/Todo/TodoSlice";

export const store = configureStore({

  reducer: todoReducer,

});