How can i remove an object from an array state in Redux/react

Question

I want to remove an object from an array onClick when I click on the delete button, I write some code in my redux and react as well and it is not working !!

My reducers

import { ActionsTypes } from "../Constant/ActionsTypes";

argument(state, action)


const initialState = {
    events : [],
    days : (""),
};


export const SetEventReducer = (state = initialState, action) => {
    switch(action.type) {
      case ActionsTypes.SET_EVENTS : 
            return {... state, events : action.payload};
      default : 
        return state;
    }

};


export const trackDaysReducer = (state= initialState, action) => {
    switch(action.type) {
        case ActionsTypes.TRACK_DAYS: 
            return {... state, days : action.payload}
        default : 
            return state;
    }
};



export const removeEventReducer = (state = initialState,action) => {
    switch(action.type) {
      case ActionsTypes.REMOVE_EVENT : 
            return {}
      default : 
        return state;
    }

};

Event array represents my state array

My Event Component who contains the button

import React from 'react'
import { useSelector, useDispatch } from 'react-redux';
import { RemoveEvent } from '../Redux/Actions/ActionsEvents';

const Event = () => {
    const events = useSelector((state)=> state.allEvents.events);
    const removeEvents = useSelector((state)=> state.removeEvents);
    const dispatch = useDispatch();

    const removeEventHandler = () => {
        dispatch(RemoveEvent({}))
    }
    return (
    <section>
    {events.map((singleEvent)=> {
        const {title, id, day} = singleEvent;
        return (
            <article className="event-pop-up" key={id} >
                <h1>The Name of your Event is <span>{title}</span></h1>
                <button className="btn event"
                        onClick={removeEventHandler}>
                            Delete Event</button>
            </article>
         )
    })}
    </section>
    )
}

export default Event;

RemoveEventAction

export const RemoveEvent = (id) => {
    return {
        type : ActionsTypes.REMOVE_EVENT,
    };
};

This is the link to check out the app : https://boring-boyd-ecbeee.netlify.app/

What do you think? Thanks

Answer 1

Try this code :

in yours reducers :

export const removeEventReducer = (state = initialState,action) => {
    switch(action.type) {
      case ActionsTypes.REMOVE_EVENT : 
            return {... state, events : state.events.filter((event) => event.id !== action.payload)} // payload = id in this case
      default : 
        return state;
    }

then in your Event Component who contains the button :

import React from 'react'
import { useSelector, useDispatch } from 'react-redux';
import { RemoveEvent} from '../Redux/Actions/ActionsEvents';

const Event = () => {
    const events = useSelector((state)=> state.allEvents.events);
    const removeEvents = useSelector((state)=> state.removeEvents);
    const dispatch = useDispatch();

    const removeEventHandler = (id) => {
        dispatch(RemoveEvent(id))
    }
    return (
    <section>
    {events.map((singleEvent)=> {
        const {title, id, day} = singleEvent;
        return (
            <article className="event-pop-up" key={id} >
                <h1>The Name of your Event is <span>{title}</span></h1>
                <button className="btn event"
                        onClick={()=> removeEventHandler(id)}>
                            Delete Event</button>
            </article>
         )
    })}
    </section>
    )
}

export default Event;

then in your RemoveEvent action

export const RemoveEvent = (id) => {
    return {
        type : ActionsTypes.REMOVE_EVENT, payload: id
    };
};