Deciding ACTIONS

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

Comments

Post a Comment

Popular posts from this blog

TODO COMPONENT (PROVIDER AND USE SLECTOR)

Image
 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...
Read more

MARK AS DONE

Image
 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 >
Read more