admin管理员组文章数量:1326641
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>
Share
Improve this question
edited Jul 27, 2021 at 0:45
Brian Destura
12.1k3 gold badges20 silver badges38 bronze badges
asked Jul 26, 2021 at 18:59
Waleed ur RehmanWaleed ur Rehman
1193 silver badges11 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
2 Answers
Reset to default 5deleteLead
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
版权声明:本文标题:javascript - TypeError: dispatch is not a function React and Redux - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742206421a2432898.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论