SamwithCode

Redux toolkit Add, Delete Task 2025

Redux Toolkit Add, Delete Task - 2025

  
// 1. Setup Redux Toolkit

// store.js
import { configureStore } from '@reduxjs/toolkit';
import taskReducer from './taskSlice';

export const store = configureStore({
  reducer: {
    tasks: taskReducer,
  },
});
  
  
  
// 2. Create Slice

// taskSlice.js
import { createSlice } from '@reduxjs/toolkit';

const taskSlice = createSlice({
  name: 'tasks',
  initialState: [],
  reducers: {
    addTask: (state, action) => {
      state.push({ id: Date.now(), text: action.payload });
    },
    deleteTask: (state, action) => {
      return state.filter(task => task.id !== action.payload);
    },
  },
});

export const { addTask, deleteTask } = taskSlice.actions;
export default taskSlice.reducer;
  
  
  
// 3. Setup Provider

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);
  
  
  
// 4. App.js

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTask, deleteTask } from './taskSlice';

function App() {
  const [input, setInput] = useState('');
  const dispatch = useDispatch();
  const tasks = useSelector((state) => state.tasks);

  const handleAdd = () => {
    if (input) {
      dispatch(addTask(input));
      setInput('');
    }
  };

  const handleDelete = (id) => {
    dispatch(deleteTask(id));
  };

  return (
    

      
Task Manager

      

         setInput(e.target.value)}
          placeholder="Enter task"
          className="border p-2 flex-1 rounded"
        />
        
      


      
    
        {tasks.map(task => (
          
  • 
            {task.text}
            
          
    • 
        ))}
      

    

  );
}

export default App;