刪除帶有 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

要刪除一個項目，您應該返回 state

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

代替

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