Dispatch Actions in React using Redux 2025

Redux mein dispatch() function ka use karke hum actions like Add, Delete, Update, aur Read trigger karte hain.

1. Action Creators

// src/redux/actions.js
export const addItem = (item) => ({
  type: 'ADD_ITEM',
  payload: item
});

export const deleteItem = (id) => ({
  type: 'DELETE_ITEM',
  payload: id
});

export const updateItem = (item) => ({
  type: 'UPDATE_ITEM',
  payload: item
});

export const readItems = () => ({
  type: 'READ_ITEMS'
});
    

2. Reducer

// src/redux/reducer.js
const initialState = {
  items: []
};

export const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {...state, items: [...state.items, action.payload]};
    case 'DELETE_ITEM':
      return {...state, items: state.items.filter(item => item.id !== action.payload)};
    case 'UPDATE_ITEM':
      return {
        ...state,
        items: state.items.map(item =>
          item.id === action.payload.id ? action.payload : item
        )
      };
    case 'READ_ITEMS':
      return state;
    default:
      return state;
  }
};
    

3. Dispatch in Component

// src/components/ItemManager.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addItem, deleteItem, updateItem, readItems } from '../redux/actions';

const ItemManager = () => {
  const dispatch = useDispatch();
  const items = useSelector(state => state.items);

  const handleAdd = () => {
    dispatch(addItem({ id: Date.now(), name: 'New Item' }));
  };

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

  const handleUpdate = (item) => {
    dispatch(updateItem({ ...item, name: 'Updated Item' }));
  };

  return (
    

      Add Item
      

        {items.map(item => (
          

            {item.name}
            

               handleUpdate(item)} className="bg-yellow-500 text-white px-3 py-1 rounded mr-2">Update
               handleDelete(item.id)} className="bg-red-500 text-white px-3 py-1 rounded">Delete
            
          
        ))}
      
    
  );
};

export default ItemManager;
    

Is tarah aap Redux ke actions ko dispatch karke CRUD operations perform kar sakte ho.