从直接链接中加载Redux项目到状态中

Question

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

情况是这样的，我有一个书店应用程序，其中包含作为 state.bookstore.books 存在的 books 列表。当访问者加载书店首页时，会分派一个 thunk 操作，将用户收藏中的所有 book 对象加载到 state.bookstore.books 数组中。

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

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

我的问题是什么是“正确”的方法？我是否会在任何时候初始化应用程序时分派 loadBookstore 操作以填充状态？是否会为 book 创建新的redux功能？是否会忽略在状态中查找 book，而只是从服务器获取特定的 book 记录？

我假设我做错了 / 实施了反模式，因为选择器不是为了带参数而构建的，因此似乎既然没有简单的方法从存储中获取书籍 123，那么我就不应该这样做。

- user101289

Answer 1

假设我们有两个组件：

1. 用于 `/books/` 的 `BooksHome`。 2. 用于 `/books/:id` 的 `SingleBook`。

因此，当用户访问 `/books/` 路由时，触发一个 thunk `fetchBooks(..)`，它会加载书籍并将其保存在 `state.bookstore.books` 中，并在 `BooksHome` 中显示这些书籍。

当用户访问 `/books/:id` 路由时，触发一个 thunk `fetchSingleBook(..)`，它会查找具有 `:id` 的书籍项目是否存在于 `state.bookstore.books` 中。如果存在，则返回该书籍并在 `SingleBook` 中显示它；如果不存在，则获取该书籍，将其添加到 `state.bookstore.books` 中，并在 `SingleBook` 中显示它。

解释：

当用户立即访问 `/books/123` 时，`state.bookstore.books` 是 `[]`，因此没有找到任何项目，因此我们将获取它、存储它并显示它。

当用户访问/books/（数据已获取并存储），然后访问/books/123时，state.bookstore.books将具有id:123的项目，因此该项目被找到，因此我们将从state.bookstore.books获取它并显示它。

必须完成的事情：

1. fetchBooks必须在BooksHome中分派，而不是在App中。
2. 同样，fetchSingleBook必须在SingleBook中分派。

通过这种方法进行优化的事项：

1. 为了显示单个书籍，我们不需要获取所有书籍。
2. 当书籍数据已经可用于state.bookstore.books时，我们无需重新获取书籍数据。

希望这可以帮助。

- p2pdops