React Redux 操作没有做任何事情答案

【问题标题】：React Redux action doesn't do anythingReact Redux 操作没有做任何事情
【发布时间】：2020-10-21 22:36:36
【问题描述】：

在 Redux 中，我创建了另一个操作，只是复制了以前的工作，但它不起作用。

有效的：

export const addEntry = entry => {
  const config = {
    headers: {
      "Content-Type": "application/json",
    },
  }

  return async dispatch => {
    const response = await axios
      .post("http://localhost:5000/api/db/addentry", entry, config)
      .then(results => results.data)

    try {
      await dispatch({ type: ADD_ENTRY, payload: response })
    } catch (error) {
      console.log("await error", error)
    }
  }
}

没有的：

export const deleteEntry = itemId => {

  console.log("action delete 1") // step 1

  return async dispatch => {

    console.log("action delete 2") // step 2

    const response = await axios.delete(
      `http://localhost:5000/api/db/deleteitem/${itemId}`,
      itemId
    )

    try {

      console.log("action delete 3") // step 3

      await dispatch({ type: DELETE_ENTRY, payload: response })
    } catch (error) {
      console.log("await error", error)
    }
  }
}

如果我逐步记录它，它会在第一次记录后停止

它什么也没做。相同的功能addEntry 完美运行。有什么想法吗？

【问题讨论】：

看来您必须删除带有 itemId 的条目。而你正在使用axios.post，我建议你使用axios.delete。否则，它看起来不错。
这可能会有所帮助：stackoverflow.com/questions/51369563/…
发送了吗？你能在异步之前发送类似dispatch({type:'begin delete'})的东西吗？是否提出请求？在浏览器中有一个叫做开发工具的东西，它有一个网络选项卡，您可以在其中查看网络活动，如果安装有一个 redux 选项卡（redux 开发工具），在发布关于 SO 的问题时非常有用质量优于it doesn't work 或it does nothing
它已经是 .delete 但 .post 只是一个尝试
@MarcoDisco 如果你使用 react redux connect 你可能没有从你的组件调度操作，你从你的组件调用props. deleteEntry(id)，如果你使用钩子，你调用const dispatch = useDispatch();dispatch(deleteEntry(id))。

标签： reactjs react-redux

【解决方案1】：

您必须删除 ItemId，使用 axios.delete 而不是 axios.post

你还必须把你的 DELETE_ENTRY 写成 'DELETE_ENTRY' 否则你的 reducer 不会理解它

【讨论】：

不，你必须把它放在括号中才能工作 ('')，因为在你的减速器中它就像：case 'DELETE_ENTRY':

【解决方案2】：

第一个日志通过的原因是因为它是动作创建者的一部分。通常，动作创建者会返回一个形状为{ type: <type>, payload: <payload> } 的对象，但在这种情况下，它会返回一个新函数，称为“thunk”。

如何分派此操作？

为了让它工作，你必须包含 redux-thunk 中间件，如果它通过dispatch(...) 接收到一个函数，就会执行那个函数。

了解thunks here

【讨论】：

【解决方案3】：

感谢@HMR，我只是在调用操作时忘记了dispatch(deleteEntry(item.itemId))

【讨论】：