从直接链接加载 redux 项目到状态

IT技术 javascript reactjs redux react-redux
2021-05-22 18:21:47

这是一个“最佳实践”问题,因为我不清楚处理这种情况的正确方法。

情况是我有一个书店应用程序,其中包含一个books作为state.bookstore.books. 当访问者加载书店的索引页时,thunk会调度一个动作book,将用户集合中的所有对象加载state.bookstore.books数组中。

在书店页面上,用户可以单击一本书,然后加载一个新页面,该页面book从状态books数组中提取项目并显示详细信息。

我的问题是,如果用户直接访问书籍详细信息链接(例如“mysite.com/book/123”)而没有先通过主页,则state.bookstore.books数组为空,并且页面没有数据可显示。

我的问题是这样做的“正确”方法是什么?我会loadBookstore在应用程序初始化时分派操作来填充状态吗?我会为它创建一个新的 redux 功能book吗?我会忽略book在状态中查找,而只是book从服务器获取特定记录吗?

我假设我做错了/实现了一个反模式,因为选择器不是为了接受参数而构建的,所以似乎因为没有简单的方法可以123从商店中获取书籍,那么我不应该这样做大大地。

1个回答

假设我们有 2 个组件

  1. BooksHome 为了 /books/
  2. SingleBook 为了 /books/:id

所以当用户访问/books/路由时,触发一个 thunkfetchBooks(..)加载书籍并将它们保存在其中state.bookstore.books并显示这些书籍BooksHome

当用户访问/books/:id路由时,触发一个 thunk fetchSingleBook(..),它会找到带有:idin 的图书项目,state.bookstore.books如果存在,则返回并显示在其中SingleBook,如果不存在,则获取它,将其添加到state.bookstore.books并返回并显示在 SingleBook.

解释:

当用户访问/books/123往右走,state.bookstore.books就是[]这样没有项目被发现,所以我们把它拿来,存储并显示出来。

当用户访问/books/(获取和存储数据)然后访问时/books/123state.bookstore.books正在拥有一个项目,id:123因此找到了该项目,因此我们将从中获取state.bookstore.books并显示它。

必须做的事情:

  1. fetchBooks必须派送,BooksHome但不派送App
  2. fetchSingleBook必须以同样的方式发送SingleBook

用这种方法优化的事情:

  1. 我们不需要获取所有书籍来显示一本书。
  2. 我们不需要重新获取书籍的数据,当它已经可用时 state.bookstore.books

希望这有帮助🤝