TOTAL CODE

 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);
    dispatch(markAsDone(id));
  };
  return (
    <>
      <h3>Todo App</h3>
      <AddForm />
      <ul>
        {todos.map((todo) => (
           
          <li key={todo.id} >
             <span style={todo.isDone ? { textDecoration: "line-through" } : {}}>
             {todo.task} &nbsp;
           </span>
            <button
              onClick={() => {
                Delete(todo.id);
              }}
            >
              delete
            </button>
            &nbsp;
            <button
              onClick={() => {
                Mark(todo.id);
              }}
            >
              Mark as Read
            </button>
          </li>
        ))}
      </ul>
    </>
  );
}


ADDFORM.JSX

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));
    setTask("");
  };
  return (
    <>
      <form onSubmit={handleSubmit}>
        <input placeholder="add task" type="text" onChange={handleChange} />
        <button>submit</button>
      </form>
    </>
  );
}


IN FEATURES, TODOSLICE.JS

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

const initialState = {
  todos: [],
};

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.map((todo) => {
        if (todo.id === action.payload) {
          todo.isDone = true;
        }
      });
    },
  },
});
export const { addTodo, deleteTodo, markAsDone } = todoSlice.actions;
export default todoSlice.reducer;


SRC/APP/STORE.JS

import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "../Features/Todo/TodoSlice";

export const store = configureStore({
  reducer: todoReducer,
});













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