删除带有 redux 的项目

Question

Im trying to delete messages written in a form with react and redux.

The id props is sent correctly as I can see in console, but I only get my error msg when I press the delete button.

This is the button component:

import React from 'react'
import { useDispatch } from 'react-redux'
import { messages, fetchDeleteMessage } from 'reducer/messages'


export const DeleteBtn = (props) => {

    const dispatch = useDispatch()

    const handleDeleteMessageClick = () => {

        dispatch(fetchDeleteMessage(props.message.id))

        console.log('delete message', (props.message.id))
    }

    return (
        <button className="delete-btn"
            onClick={handleDeleteMessageClick}>
            <span role="img" aria-label="delete">✖︎</span>
        </button>
    )
}

This is my reducer where I try to fetch and delete a specific message upon its id, the id is passed on to the fetch correctly, but nothing happens and I cant see whats wrong and feel I tried it all (....apparently not)

import { createSlice } from '@reduxjs/toolkit'

export const messages = createSlice({

    name: 'messages',
    initialState: {
        allMessages: [],
    },


    reducers: {

        deleteMessage: (state, action) => {
            console.log('deleteMessageState', state)
            console.log('deleteMessageAction', action)
            //finds the task
            //remove it from the array
            state.allMessages = state.allMessages.filter((message) => message.id !== action.payload)

        },
    }

})



//****** fetch DELETE message ********
export const fetchDeleteMessage = (id) => {
    return (dispatch) => {
        fetch(`http://localhost:3004/messages/${id}`, {
            method: 'DELETE',
            statusCode: 204,
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then((res) => res.json())
            .then(json => {
                console.log('DELETE', json, id)
                dispatch(messages.action.deleteMessage(id))
            })
            .catch(err => {
                console.error('error', err)
                dispatch(messages.actions.deleteMessage({ error: `Error, failed to delete` }))
            })
    }
}
`````

Answer 1

To delete an item you should return state

return state.allMessages.filter((message) => message.id !== action.payload)

instead of

state.allMessages = state.allMessages.filter((message) => message.id !== action.payload)