javascript - 如何从功能组件调用调度程序？

Question

我有这个功能组件。我想在单击 .delete 时调用调度程序。我已经做了一个我期望在onClick上做的例子：

import React from 'react'
import { Link } from 'react-router-dom'

export default function FeedItem(article) {
  return (
    <div className="feed-item flex-column" key={article.id}>
      <Link  to={`/posts/${article.id}`} className="title">{article.title}</Link>
      <div className="delete" onClick={() => dispatch({someType})}>X</div>
      <p>{article.body}</p>
      <Link to={`/edit`} params={{postid: article.id}} className="edit">edit</Link>
    </div>
  )
}

应该怎么做才对？

标签： javascriptreactjsredux

Answer 1

您可以使用useDispatch钩子，它为您提供对该dispatch函数的引用

import { useDispatch } from 'react-redux';

export default function FeedItem(article) {
  const dispatch = useDispatch();

  return (
    <div className="feed-item flex-column" key={article.id}>
        <Link to={`/posts/${article.id}`} className="title">{article.title}</Link>
        <div className="delete" onClick={() => dispatch({ someType })}>X</div>
        <p>{article.body}</p>
        <Link to={`/edit`} params={{ postid: article.id }} className="edit">edit</Link>
    </div>
  );
}