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

Question

我确信这是我的大脑不明白的情况...但是...

我习惯于使用类组件，而不是一般的功能组件，并且使用 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>
  );
};