在反应中调用调度函数答案

【问题标题】：To call dispatch function in react在反应中调用调度函数
【发布时间】：2020-10-31 13:56:10
【问题描述】：

我不知道在哪里调用 dispatch(setAlert()) 函数。在 axios.patch 请求之后我想要它，但目前它不起作用

  let url = `.....................`;
  const handleSubmit = (e) => {
    e.preventDefault(); 
    axios
      .patch(url, form_data, {
        headers: {
          Authorization: `JWT ${localStorage.getItem("access")}`,
          "content-type": "application/json",
        },
      })
      dispatch(setAlert('Data changed successfully.', 'success'));
      .then(() => axios.get(url))
      .then((res) => {
        console.log(res.data);
        updateFormData({
          ...formData
        })
      })
      .catch((err) => console.log(err));
    };

【问题讨论】：

必须在 then 块中，高于或低于updateFormData 调用

标签： reactjs dispatch

【解决方案1】：

在then 中添加dispatch 调用，紧跟在patch 调用之后：

const handleSubmit = (e) => {
    e.preventDefault(); 
    axios
      .patch(url, form_data, {
        headers: {
          Authorization: `JWT ${localStorage.getItem("access")}`,
          "content-type": "application/json",
        },
      })
      .then(() => {
         dispatch(setAlert('Data changed successfully.', 'success'));
         axios.get(url));
       }
      .then((res) => {
        console.log(res.data);
        updateFormData({
          ...formData
        })
      })
      .catch((err) => console.log(err));
    };

编辑：确保在类组件的情况下连接组件或在功能组件的情况下导入 useDispatch 钩子，例如：

import { useDispatch } from 'react-redux'

function SomeComponent() {
    const dispatch = useDispatch();
    ...
    // your code place

}

【讨论】：

你是不是把这段代码放在和 redux 连接的组件中，并从 props 中获取dispatch？
你使用的是什么 redux 版本？
"react-redux": "^7.2.1", "redux": "^4.0.5",
更新了答案以使用dispatch
这有效..感谢您的时间和回答非常感谢您的帮助

【解决方案2】：

您可以使用 async / wait 然后等待补丁调用完成。

  const handleSubmit = async (e) => {
    e.preventDefault(); 
    await axios
      .patch(url, form_data, {
        headers: {
          Authorization: `JWT ${localStorage.getItem("access")}`,
          "content-type": "application/json",
        },
      })
      dispatch(setAlert('Data changed successfully.', 'success'));
      .then(() => axios.get(url))
      .then((res) => {
        console.log(res.data);
        updateFormData({
          ...formData
        })
      })
      .catch((err) => console.log(err));
    };

【讨论】：