在Redux中复制状态

Question

假设您有一个使用Redux的书籍应用程序,其中包含一些功能:

• 买书
• 有一份书愿望清单
• 维护您拥有的书籍清单
• 向朋友发送推荐信
• 复习书籍

现在让我们说所有这些不同的模块,以及所有这些模块的共同特征是能够搜索书籍(即搜索要购买的书籍,添加到心​​愿单的书籍,要审阅的书籍等).

这些搜索结果将存储在状态树的多个切片中.

状态树的示例可能如下所示:

{
  bookStore: {
    booksSearchResults: [],
    ...,
  },
  wishlist: {
    booksSearchResults: [],
    ...,
  },
  reviews: {
    newReview: {
      booksSearchResults: [],
      ...,
    },
    ...
  },
  ...
}

是否有关于管理此类事物的最佳实践？是否只是booksSearch通过共享组件获得一个状态并进行管理？

如果您可能需要在同一屏幕上的多个位置搜索图书(例如,除了应用程序主要部分中的搜索组件之外,您可能在导航栏中有自动完成搜索功能)？

另一种方法是重用搜索逻辑并以某种方式让它更新状态的不同部分(如果是这样,是否存在实现此目的的东西)？

Answer 1

我有两个建议给你：

1. 使您的商店正常化。
2. 不要将搜索结果存储在 redux 中。

正常化

这是有据可查的，所以我不会在这里深入讨论。可以这么说，标准化您的商店将是灵活的，并帮助您推理您的应用程序。将您的商店视为服务器端数据库，与根据视图定制状态的每个部分相比，它的可重用性更高。

您可以为您的应用执行此操作的一种方法：

{
  books: { 
    bookId: { 
      bookDetails,
      reviews: [ reviewId ],
      ownedBy: [ userId ],
      wishlistedBy: [ userId ],
      recommendations: [ recommendationId ]
    }
  },
  users: {
    userId: { 
      userDetails,
      reviews: [ reviewId ],
      wishlist: [ bookId ],
      ownedBooks: [ bookId ],
      friends: [ userId ],
      sentRecommendations: [ recommendationId ],
      receivedRecommendations: [ recommendationId ]
    }
  },
  reviews: {
    reviewId: {
      bookId,
      userId,
      reviewDetails
    }
  },
  recommendations: {
    recommendationId: {
      sender: userId,
      recipient: userId,
      bookId,
      recommendationDetails
    }
  }
}

您可能不需要所有这些关系，所以不要觉得您必须实现所有这些。但是从与此类似的基础开始将使以后添加功能变得更加容易。

资源：

• 标准化状态形状
• 为什么要规范化？

在哪里放置搜索结果

搜索结果更多的是视图细节而不是数据问题。您可能需要存储搜索的历史记录，在这种情况下，您可以为搜索添加一个 reducer：

{
  searches: [
    {
      searchTerm,
      searchDetails
    }
  ]
}

但即使在这种情况下，我也不认为我会存储搜索结果。在几种情况下，存储结果会限制功能。

1. 当用户搜索时，然后添加了一本新书，除非您重新运行搜索（这否定了存储结果的用处），否则您将不会在后续搜索中找到新书。
2. 搜索需要快速，存储结果只会加快重复搜索的速度（这可能不太常见）。

因此，我将结果视为视图细节——或者，正如 James K. Nelson 所说，“控制状态”（阅读：React 应用程序状态的 5 种类型）。您的问题没有说明您使用的是哪个视图库（如果有），但是无论您是否使用 React，这里的概念都应该适用。

搜索结果应由视图计算。视图将接收用户输入，潜在地获取数据（将添加到存储中），在 Redux 状态上运行一些过滤器功能，并显示结果。