TypeError：dispatch 不是 React 和 Redux 的函数

Question

删除某些潜在客户（项目）时出现错误。 它从数据库中删除而不是从 UI 中删除，并给出此错误dispatch is not a function.

//lead.js from /action
export const deleteLead = (id) => {
  return (dispatch) => {
    axios
      .delete(`/api/leads/${id}/`)
      .then((res) => {
        dispatch({
          type: DELETE_LEAD,
          payload: id,
        });
      })
      .catch((err) => console.log(err));
  };
};

//Frontend file 
import { getLeads, deleteLead } from "../../actions/leads";

<button
  onClick={deleteLead(lead.id)}
  className="btn btn-danger btn-sm">
   Delete
</button>

Answer 1

我不确定这是否是问题所在，但你肯定应该有这个：

<button
  onClick={() => deleteLead(lead.id)}
  className="btn btn-danger btn-sm">
   Delete
</button>

您提供的代码将在呈现组件后立即调用 deleteLead 函数！

Answer 2

deleteLead是一个动作创建者。 使用deleteLead(lead.id)调用它会创建一个操作，然后您需要调度该操作。

import { useDispatch } from 'react-redux'

const YourComponent = () => {
  const dispatch = useDispatch() // or however else you want to get redux's dispatch function

  return (
    <button onClick={() => dispatch(deleteLead(lead.id))}>
      Delete
    </button>
  )
}

为了能够使用返回函数而不是普通动作对象的动作创建者，您需要使用redux-thunk中间件。