Question

我正在阅读官方 Redux 教程 (Redux Essential)，但我认为缺少一件事。有一个简单的“列表/详细信息”示例，一切都很清楚，但如果用户在地址栏中手动输入确切地址，则详细信息页面 (SinglePostPage) 将不起作用。换句话说，如果您直接在 SinglePostPage 上打开网站 - 将不会获取帖子列表，因此页面将显示：未找到帖子！。查看帖子的唯一方法是先打开列表，然后单击“查看帖子”。

这是一个 SinglePostPage

import React from 'react'
import { useSelector } from 'react-redux'

export const SinglePostPage = ({ match }) => {
  const { postId } = match.params

  const post = useSelector(state =>
    state.posts.find(post => post.id === postId)
  )

  if (!post) {
    return (
      <section>
        <h2>Post not found!</h2>
      </section>
    )
  }

  return (
    <section>
      <article className="post">
        <h2>{post.title}</h2>
        <p className="post-content">{post.content}</p>
      </article>
    </section>
  )
}

我可以简单地获取这篇文章，就像它为文章所做的那样，但我最大的担忧是，在第一个渲染中 useSelector 将返回未定义的文章，然后它才会调度 fetch 操作。我如何知道“未定义”是指未找到该帖子还是什至未获取该帖子？

所以我的问题是，处理它的最佳方法是什么？我应该为具有加载状态和错误的单个帖子创建一个单独的切片吗？类似于postsSlice？我不确定每个功能是否应该有两个切片。我应该吗？

编辑：澄清一下，我并不是说该教程有错误。这是一个非常简单的非现实应用示例。本教程未涵盖您无法通过在浏览器中键入直接 URL 来打开帖子详细信息的事实。所以我的问题是关于这个“问题”的可能解决方案。

当用户直接打开详细信息页面时，如何获取项目的详细信息？

0 个答案: