ADD TODO ( DISPATCHING ACTIONS )

 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) => {
    event.preventDefault();
    console.log(task);
    dispatch(addTodo(task));
  };
  return (
    <>
      <form onSubmit={handleSubmit}>
        <input placeholder="add task" type="text" onChange={handleChange} />
        <button>submit</button>
      </form>
    </>
  );
}


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

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