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

You can remove an event using it's id.

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>

After passing this id to the reducer you can loop through the events array and remove this event from array and set the new state.

And in your reducers, you can use filter() method to remove a particular event having that id

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

For Remove Event Action:

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

Answer 2

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
    };
};