使用 redux 删除项目

Posted 2023-02-22

【中文标题】使用 redux 删除项目

【英文标题】：Delete item with redux

【发布时间】：2020-08-18 16:27:48

【问题描述】：

我正在尝试使用 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` ))
            )
    

`````

【问题讨论】：

您是否在浏览器中检查了网络选项卡以查看 HTTP 调用的状态？

感谢@MarcoMoretti 的提示，现在我可以看到它实际上删除了正确的。我在浏览器中的列表没有更新，我会尝试一下，你现在有没有机会改变我写的响应代码原因，statusCode: 204 isnt working？

204 对于这种情况很好，因为 DELETE 方法不会返回任何内容

感谢@MarcoMoretti 帮助我！

【参考方案1】：

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

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

而不是

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