javascript - TypeError: dispatch is not a function React and Redux - Stack Overflow

admin管理员组

文章数量:1327476

I get an error when I delete some lead(item). It deletes from the database but not from UI and gives this error 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>

I get an error when I delete some lead(item). It deletes from the database but not from UI and gives this error 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>

• javascript
• reactjs
• redux
• axios

Share Improve this question Follow edited Jul 27, 2021 at 0:45 Brian Destura 12.1k33 gold badges2020 silver badges3838 bronze badges asked Jul 26, 2021 at 18:59 Waleed ur RehmanWaleed ur Rehman 11933 silver badges1111 bronze badges 4

• 2 A typo? You probably meant to pass a function to onClick instead: onClick={() => deleteLead(lead.id)} But even then it's not really clear where you actually dispatch to Redux. Where do you include/use anything from Redux here? Currently you just have a function that returns a function. – David Commented Jul 26, 2021 at 19:01
• @David it's not working – Waleed ur Rehman Commented Jul 26, 2021 at 19:07
• It's a step in the right direction. But where is Redux actually used here? Calling deleteLead() returns a function. What do you do with that function? (In the code shown that function is used as a click handler, and the environment passes an event object to a click handler, not a function.) – David Commented Jul 26, 2021 at 19:09
• Removed django tag – Brian Destura Commented Jul 27, 2021 at 0:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

deleteLead is an action creator. Calling it with deleteLead(lead.id) creates an action, which you then need to dispatch.

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>
  )
}

To be able to use an action creator that returns a function instead of a plain action object, you will need to use the redux-thunk middleware.

I'm not sure if this is the problem, but certainly you should have this:

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

Your code as provided will call the deleteLead function as soon as the ponent is rendered!

本文标签： javascriptTypeError dispatch is not a function React and ReduxStack Overflow