Question

我确定这只是我的大脑的一个问题……但是...

我习惯于使用类Components而不是一般的功能组件，并且我使用React Redux尝试编写一个分派动作的组件。您可能知道，该动作当然会导致减速器更新Redux状态（存储）。尝试用useSelector和useDispatch替换mapStateToProps和mapDispatchToProps但是让我创建了一个循环...我猜我在使用useSelector不正确。

import { fetchPostsByTerm } from "../../_actions/_postActions";
import { useSelector, useDispatch } from "react-redux";

const payload = { vocabulary: "tags", term: "thiphif" };

export const PostsByTerm = () => {
  const dispatch = useDispatch();
  dispatch(fetchPostsByTerm(payload));
  const posts = useSelector((state) => state.postsByTerm);

  return (
    <div>
      <h1 className="post_heading">Posts</h1>
      {posts ? posts.map((post) => <h1>{post.entityLable}</h1>) : <h1>no posts</h1>}
    </div>
  );
};

也许我使用正确？同一页面上还有其他组件的更新状态

Answer 1

不得直接在功能组件中分派。而是使用useEffect挂钩执行调度。如果您的目标是仅在初始渲染时分派操作，则将依赖项作为空数组传递给useEffect

export const PostsByTerm = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchPostsByTerm(payload));  
  }, [])

  const posts = useSelector((state) => state.postsByTerm);

  return (
    <div>
      <h1 className="post_heading">Posts</h1>
      {posts ? posts.map((post) => <h1>{post.entityLable}</h1>) : <h1>no posts</h1>}
    </div>
  );
};

Answer 2

FYI-在这里评论是因为这是我了解useEffect实用程序中array []的目的的“ aha”时刻。该数组用于容纳状态变量，这些状态变量在更改后将强制执行列出的功能。因此，就我而言，实际上是因为我希望在选定的术语发生更改时执行fetchPostsByTerm（因为我的示例显示为硬编码，所以不明显）

  useEffect(() => {
    dispatch(fetchPostsByTerm(payload));  
  }, [term])

...是我最终所追求的。现在效果很好！选择新术语后，将提取所选术语的文章。

使用useSelector和useDispatch反应功能组件创建循环

2 个答案: