使用 React 和 Redux Hooks，为什么我的操作没有触发？

Question

编辑：已解决！请参阅below。

我希望我的 Blog 组件在每次浏览器请求其 URL 时触发 fetchBlog 动作创建者，无论是通过链接还是刷新。我想用 React useEffect Hook 和 React-Redux useDispatch 和 useSelector Hooks 来做。但是，我的操作仅在点击页面链接时触发；我不明白为什么，即使在阅读了几个解释（如the official docs）之后。

代码如下：

// Everything duly imported, or else VSC would yell at me

export default function Blog() {
  const dispatch = useDispatch();
    // slug is set here with useSelector, this always works
  useEffect(() => {
    dispatch(fetchBlog(slug))
  }, [slug, dispatch]);
  const blog = useSelector((state) => state.blogs[0]);
    // return renders the blog information from the blog constant
    // since the action does not fire, blog is undefined because state.blogs is an empty array
}

我知道，在刷新时，fetchBlog 不会因为 Redux DevTools 而触发，也因为我在那里放了一个debugger。 （并且后端日志没有显示进来的请求。）动作创建者本身和减速器必须在工作；否则，当通过链接访问时，页面将无法正确加载。

编辑：我已经确定 useSelector 和 useDispatch 不是问题的根本原因，因为将代码更改为使用 connect 与 mapStateToProps 和 mapDispatchToProps 会得到相同的结果。问题似乎出在useEffect。

Answer 1

我认为问题在于您正在返回对调度的调用。从 useEffect 返回的函数是清理函数，所以我认为这不会在挂载或更新时运行 - 仅在卸载之前运行。试试这个：

export default function Blog() {
  // ...
  // Don't return from useEffect. Just call dispatch within the body.
  useEffect(() => {
    dispatch(fetchBlog(slug);
  }, [slug, dispatch]);
  // ...

}

https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect

Answer 2

我想澄清问题是什么，@Trace 引导我找到了。

useEffect 在刷新时没有被调用，因为它在组件渲染/返回之后被调用。刷新时，状态（包括博客数据）丢失；而不是返回，而是抛出 TypeError，因为 data.title 不存在。所以useEffect 永远没有机会被调用并获取博客的内容。

解决办法是这样的：

export default function Blog() {
  // ...
  useEffect(/* ... */)
  const blog = useSelector((state) => state.blogs[0]);
  if (!blog) {
    return <p>Loading...</p>
  }
  // return actual blog contents here
}  

所以现在确实调用了fetchBlog，更新blog 并呈现内容。

Answer 3

我不清楚蛞蝓是从哪里来的。
理论上useEffect 在每次渲染后运行。如果有多个参数，它将在第二个参数中传递的数组参数之一发生更改时运行回调。

要么创建一个useEffect，并将空数组作为第二个参数，以“一次”运行它（例如，当你刷新时）或检查 slug 值。

检查回购后编辑：

• 它不起作用，因为 useEffect 在渲染之后运行（尽管有人反对它，但我的回答中包含了它）。如果之前抛出异常（在本例中为空指针），则调度调用只会在之后发生，或者根本不会发生。

• 您可以使用match 从 react-router 获取 slug，可能对您很方便。

  export default function Blog({ match }) {
      const slug = match.params.slug;
  etc
  

• git repo 显示了如何将 dispatch as 作为数组参数添加到 useEffect，这不是必需的。