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

Question

我确定这是我的大脑无法理解的情况...但是...

我习惯于使用 class 组件而不是一般的功能组件，而对于 React Redux，我正在尝试编写一个分派动作的组件。正如您可能知道的那样，该操作当然会导致 reducer 更新 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 钩子来执行调度。如果您的 objective 仅在初始渲染时分派操作，请将依赖项作为空数组传递给 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

仅供参考 - 在这里发表评论是因为这是 "aha" 让我理解 useEffect 实用程序中数组 [] 的用途的时刻。该数组用于存放状态变量，这些变量在更改时将强制执行列出的函数。所以在我的例子中，实际上因为我希望 fetchPostsByTerm 在所选术语更改时执行（不明显，因为我的示例显示它是硬编码的）

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

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

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

React functional component with useSelector and useDispatch creates loop

reactjs

redux

react-functional-component