如何在 Redux 中设计用户状态

Question

如果你使用 Redux 并且拥有像 Instagram 这样的产品（用户状态的订阅，订阅者和当前用户），那么设计状态是否更好，只使用用户作为实体而没有任何分离（如用户数据库 table) 还是应该将状态形状分成多个块，例如订阅部分、订阅者部分和 current_user 部分？

非常感谢您！

----------------------------------------编辑---- --------------------------

https://i.stack.imgur.com/1zK1T.jpg

感谢您的回复！我有如图所示的那种状态。问题是，当您必须更新状态但存在性能问题时这很好，因为当我们想要检索订阅或订阅者时我们必须执行循环当我们进入分裂状态并拥有订阅、订阅者和 current_user 部分时，我们将不再有性能问题，因为不再需要任何循环但是当我们想要执行某些类型的更新时，我们会遇到一些问题比如，当订阅者刚刚取消关注用户时怎么办？我们会尝试找出一个解决方案来捕获它，以便商店更新订阅者列表。虽然这是一项艰巨的任务因为对于拥有数百万粉丝的人来说，这就像跟踪所有粉丝一样在长轮询技术中顺便说一句，我没有使用 Redux，我使用的是我自己的 Flux 变体，具有 Redux 风格的状态。

------------------------编辑2---------------- --------

谢谢，伙计们。我终于这样做了： https://imgur.com/a/v4iGO 我现在也有订阅者和 other_users 商店。

Answer 1

这个没有正确答案。但是你可以有类似下面的东西。

{
subscriptions:{/*....*/} ,
subscribers:{/*....*/} ,
currentUser{/*....*/} ,
}

要记住的主要事情是保持你的 Redux 状态规范化，你可以使用像 normalizr 这样的库来做到这一点。由于 Redux State 中的 Array of Objects 是一个糟糕的设计，它应该尽可能扁平化。
阅读此聊天以获取更多解释 //groups.google.com/forum/#!topic/reactjs/jbh50-GJxpg

示例：如果您的订阅者是对象数组

{subscribers :[{id:subscriberId1, ....}, {id:subscriberId2, ....}]}

将其转换为如下所示。

subscribers :{
subscriberEntities:{
subscriberId1:{id:subscriberID1, ....}, 
subscriberId2:{id:subscriberId2, ....}
}
subscriberEntitiesOrder:[subscriberId1,subscriberId2]

所以在这里，如果你有 id，你可以直接从 subscriberEntities[id] 获取它的对象以及它的索引 subscriberEntitiesOrder.indexOf(id)，而不必每次都循环。 :)

如 Redux 文档中所述，这样做的主要好处是：

When a piece of data is duplicated in several places, it becomes harder to make sure that it is updated appropriately.

Nested data means that the corresponding reducer logic has to be more nested and therefore more complex. In particular, trying to update a deeply nested field can become very ugly very fast.

Since immutable data updates require all ancestors in the state tree to be copied and updated as well, and new object references will cause connected UI components to re-render, an update to a deeply nested data object could force totally unrelated UI components to re-render even if the data they're displaying hasn't actually changed.

Because of this, the recommended approach to managing relational or nested data in a Redux store is to treat a portion of your store as if it were a database, and keep that data in a normalized form.

如何在 Redux 中设计用户状态

How to design the users state in Redux

javascript

state

flux

instagram-api

redux