architecture - 在 Redux 中复制状态

Question

假设您有一个使用 Redux 的图书应用程序，具有以下几个特性:

买书

有书的愿望 list

维护您拥有的书籍列表

向 friend 发送推荐

书评

现在让我们假设所有这些不同的模块，所有这些模块的一个共同特征是搜索书籍的能力(即搜索要购买的书籍、​​要添加到愿望 list 的书籍、要评论的书籍等)。

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

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

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

有没有关于管理这些事情的最佳实践？是否只是拥有一个 booksSearch状态切片并通过共享组件进行管理？

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

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

Answer 1

我有两条建议给你:

规范您的商店。

不要将搜索结果存储在 redux 中。

正常化

这是有据可查的，所以我不会在这里深入探讨。可以说，规范化您的商店将是灵活的，并帮助您推理您的应用程序。把你的 store 想象成一个服务器端的数据库，它比你为你的 View 定制状态的每个部分更可重用。

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

{
  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
    }
  }
}

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

资源:

Normalizing State Shape

Why normalize?

在哪里放置搜索结果

搜索结果更多的是查看详细信息，而不是数据问题。您可能需要存储搜索的历史记录，在这种情况下，您可以为搜索添加 reducer:

{
  searches: [
    {
      searchTerm,
      searchDetails
    }
  ]
}

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

当用户搜索时，添加了新书，除非您重新运行搜索(这否定了存储结果的用处)，否则您不会在后续搜索中找到新书。

搜索需要快速并且存储结果只会加速重复搜索(这可能不太常见)。

因此，我将结果视为 View 细节——或者，正如 James K. Nelson 所说，“控制状态”(阅读:The 5 Types of React Application State)。您的问题没有说明您正在使用哪个 View 库(如果有)，但无论您是否使用 React，这里的概念都应该适用。

搜索结果应按 View 计算。 View 将接收用户输入，可能会获取数据(将添加到存储中)，在 Redux 状态上运行一些过滤器功能，并显示结果。