Удалить элемент с избыточным

Question

Я пытаюсь удалить сообщения, написанные в форме с реакцией и избыточностью.

Идентификационные реквизиты отправляются правильно, как я вижу в консоли, но я получаю сообщение об ошибке только при нажатии кнопки удаления.

Это компонент кнопки:

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

Это мой редуктор, в котором я пытаюсь извлечь и удалить указанное c сообщение по его идентификатору, идентификатор передается в выборку правильно, но ничего не происходит, и я не вижу, что не так, и чувствую, что попробовал все это (...., видимо, нет)

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` }))
            })
    }
}
`````