reactjs - 使用 useSelector 和 useDispatch react 功能组件创建循环

Question

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

我习惯于使用类组件而不是一般的功能组件，而对于 React Redux，我正在尝试编写一个分派(dispatch) Action 的组件。正如您可能知道的那样，该操作当然会导致 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

您不得直接在功能组件中分派(dispatch)。而是使用 useEffect 钩子(Hook)来执行调度。如果您的目标是仅在初始渲染时分派(dispatch)操作，请将依赖项作为空数组传递给 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>
  );
};