Redux and Redux toolkit

 INITIALLY  IS DONE IS SET AS FALSE, WE CREATE A BUTTON SUCH THAT IT IS SET TO TRUE.   < button               onClick = { () => {                 Mark ( todo . id );               } }             >               Mark as Read             </ button >   let Mark = ( id ) => {     console . log ( id );     dispatch ( markAsDone ( id ));   }; WE ADD A LINE THROUGH WHEN IT IS SET TO TRUE.   < li key = { todo . id } >               < span style = { todo . isDone ? { textDecoration : "line-through" } : {} } >               { todo . task } &nbsp;             </ span >

 A BUTTON IS CREATED TO DELETE A TASK.   < button               onClick = { () => {                 Delete ( todo . id );               } }             >               delete             </ button > HERE, AS ID SHOULD BE SENT AS A PARAMETER , WE USE ARROW FUNCTION

 TO ADD A TODO(TASK) WE NEED TO CREATE A FORM. (CREATED IN A SIMILAR WAY TO REACT). HERE, THE TASK FILLED IN THE FORM NEEDS TO BE ADDED TO THE STORE. TO ADD WE NEED TO CREATE AN ACTION. DISPATCHING ACTION: TRIGGERING A STATE CHANGE. THE useDispatch HOOK ALLOWS YOU TO SEND (OR) DISPATCH AN ACTION TO THE REDUX STORE BY GIVING THE ACTION AS AN ARGUMENT TO THE DISPATCH VARIABLE. dispatch= useDispatch( action object ) WHILE DISPLAYING , WE NEED TO TAKE CARE OF  THE REDUX FUNCTION TO BE TRIGGERED AND BASED ON WHAT ACTION IT NEEDS TO BE TRIGGERED. import { useState } from "react" ; import { useDispatch } from "react-redux" ; import { addTodo } from "../Features/Todo/TodoSlice" ; export default function AddForm () {   const [ task , setTask ] = useState ( "" );   const dispatch = useDispatch ();   let handleChange = ( event ) => {     setTask ( event . target . value );   };   let handleSubmit = ( event ) => { ...

 A COMPONENT FOLDER IS CREATED  IN THE src FOLDER IN WHICH A todo.jsx IS CREATED. THE TODO COMPONENT IN THE FILE NEEDS ACCESS TO THE STORE INORDER TO PRINT THE LIST OF TASKS IN TODOS. THIS ACCESS IS PROVIDED BY A COMPONENT CALLED PROVIDER . PROVIDER THE <Provider> COMPONENT MAKES THE REDUX STORE AVAILABLE TO ANY NESTED COMPONENTS THAT NEED TO ACCESS THE REDUX STORE. IT IS IMPORTED IN APP.JS import "./App.css" ; import Todo from "./components/Todo" ; import { Provider } from "react-redux" ; import { store } from "./app/store" ; function App () {   return (     <>       < Provider store = { store } >         < Todo />       </ Provider >     </>   ); } export default App ; WHATEVER THE COMPONENT DECLARED INSIDE <Provider> GETS ACCESS TO THE STORE. STORE IS ALSO IMPORTED IN APP.JS, STORE IS PASSED AS A PROP . TO ACCESS STORE IN TODO.JS WE USE...

 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 L...

 HERE IN TODO ACTIONS INCLUDE , ADD A TODO, MARK AS DONE, DELETE A TODO. ACTION IS AN OBJECT, IN WHICH "TYPE" IS COMPULSORY. TYPE REFERS TO THE ACTION'S TYPE. IT CAN BE ANY NUMBER,CHARACTER BUT GENERALLY WE DECLARE TYPE AS A STRING. ALONG WITH THE TYPE , ADDITIONAL INFORMATION IS ALSO SENT CALLED AS PAYLOAD. IF WE WANT TO PASS MULTIPLE INFORMATION, PAYLOAD CAN BE DEFINED AS AN OBJECT. BUT HERE,  WE DEFINE THEM AS  { type: "ADD_TODO", payload:"WRITE CODE" } {  type:"DELETE", payload:"id" } NOTE: HERE, ACTIONS ARE NOT WRITTEN AS CODE, THEY ARE IMAGINED AS OBJECTS AND ARE ASSUMED TO LOOK LIKE THIS( WRITTEN ABOVE ).