使用 redux 删除项目

Question

我正在尝试使用 react 和 redux 删除以表单编写的消息。

正如我在控制台中看到的那样，id 道具已正确发送，但是当我按下删除按钮时，我只会收到错误消息。

这是按钮组件：

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

这是我的减速器，我尝试在其 id 上获取和删除特定消息，id 被正确传递给 fetch，但没有任何反应，我看不出有什么问题，感觉我都试过了（... .显然不是）

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

要删除项目，您应该返回状态

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

而不是

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