Redux and Redux toolkit

 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 ; TODO.JSX import { useSelector } from "react-redux" ; import AddForm from "./AddForm" ; import { useDispatch } from "react-redux" ; import { deleteTodo , markAsDone } from "../Features/Todo/TodoSlice" ; export default function Todo () {   const todos = useSelector (( state ) => state . todos );   console . log ( todos );   const dispatch = useDispatch ();   let Delete = ( id ) => {     dispatch ( deleteTodo ( id ));   };   let Mark = ( id ) => {     console . log ( id );   ...

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

 WE CREATE A TODO APP. A FILE IS CREATED IN src/app/store.js CONFIGURING STORE: STORE IS AN OBJECT. HERE, STORE CONSISTS OF AN ARRAY OF TODO'S. TODO'S ARE ALSO OBJECTS THAT CONSISTS INFO. todo => { id, task, isDone } INITIALLY, isDone : false STORE.JS import { configureStore } from "@reduxjs/toolkit" ; export const store = configureStore ({ reducer : {} });

 WE START WITH CREATING A VITE USING THE COMMAND,npm create vite@latest  THEN WE GIVE A FRAMEWORK , A PROJECT NAME, PACKAGE, SELECT A FRAMEWORK (REACT), SELECT A VARIANT (JAVASCRIPT) . TO INSTALL REDUX, WE FOLLOW THE COMMANDS, (FROM DOC) npm install @reduxjs/toolkit npm install react-redux WHILE SETTING UP A PROJECT , WE DO IT IN 3 STEPS, CONFIGURING STORE ACTIONS REDUCERS

 STORE: A CENTRALIZED STORE HOLDS THE WHOLE STATE TREE OF YOUR APPLICATION. REDUCERS: FUNCTIONS THAT TAKE THE CURRENT STATE AND ACTION AS ARGUMENTS AND RETURN A NEW STATE RESULT . IN OTHER WORDS (state, action ) => newState. ACTION: IT IS A PLAIN JAVA SCRIPT OBJECT THAT HAS A TYPE FIELD (EVENTS) SLICE: COLLECTION OF REDUX REDUCER LOGIC AND ACTIONS TOGETHER IN A SINGLE FILE. EX : FOR A NAVBAR, WE USED TO CREATE A SEPERATE FILE , SIMILARLY HERE WE CREATE A SLICE. FOR A FOOTER TOO WE CREATE A SEPERATE SLICE.

REDUX IS A STATE MANAGEMENT LIBRARY FOR JS APPS. REDUX IS BUILT FOR LARGER, MORE COMPLEX APPLICATIONS ( FOR REAL LIFE PROJECTS IN COMPANIES NOT FOR STUDENT PROJECTS) SOME USE CASES,  => WHEN MULTIPLE COMPONENTS SHARE INFORMATION THROUGH PROPS IN A HIERARCHY,WE USE REDUX TO REDUCE THE COMPLEXITY OF SENDING MULTIPLE PROPS => WHEN MULTIPLE COMPONENTS SHARE A SINGLE STATE. REDUX IS MORE LIKE A CENTRAL STORE, THAT MANAGES ALL THE STATES. IMAGINE A FEW STORES IN A TOWN, MANAGING ALL OF THEM IS QUITE COMPLEX. NOW, IF A MALL IS CREATED THAT CONSISTS OF ALL THE STORES THEN IT IS POSSIBLE TO MANAGE THEM. HERE, REDUX ACTS LIKE A MALL ( CENTRAL STORE ) THROUGH WHICH ALL THE STATES CAN BE MANAGED. REDUX TOOL KIT IS THE OFFICIAL RECOMMENDATION OF WRITING REDUX CODE. HERE STORE IS AN OBJECT THAT CONSISTS OF ALL THE STATE VARIABLES. ANY COMPONENT CAN ACCESS THIS OBJECT. JUST LIKE IN REACT WE HAVE setState() TO MUTUATE , IN REDUX WE HAVE REDUCERS. REDUCERS ARE THE FUNCTIONS USED TO MUTUATE. W...