为什么我的 Redux store 应该是可序列化的？

Question

在阅读 redux 文档时，我发现了这一点：

不过，您应该尽力保持状态可序列化。不要在里面放任何你不能轻易转换成 JSON 的东西。

所以我的问题是，保持状态可序列化有什么好处？或者，如果我将不可序列化的数据放入存储中，我可能会遇到什么困难？

而且我相信这不是 redux 独有的 - Flux，甚至 React 本地状态也暗示了同样的事情。

---

为了让我清楚这里是一个例子。假设商店结构是这样的。

 {
    books: {
        1: { id: 1, name: "Book 1", author_id: 4 }
    },
    authors: {
        4: { id: 4, name: "Author 4" }
    }
}

这应该看起来不错。但是，当我尝试访问“第一本书的作者”时，我必须编写如下代码：

 let book = store.getState().books[book_id];
let author = store.getState().authors[book.author_id];

现在，我要定义一个类：

 class Book {
    getAuthor() {
        return store.getState().authors[this.author_id];
    }
}

我的商店将是：

 {
    books: {
        1: Book(id=1, name="Book 1")
    },
    ...
}

这样我就可以通过以下方式轻松获得作者：

 let author = store.getState().books[book_id].getAuthor();

第二种方法可以让“书”对象知道如何检索作者数据，因此调用者不需要知道书和作者之间的关系。那么，为什么我们不使用它，而不是像方法 #1 那样在商店中保留“普通对象”？

任何想法表示赞赏。

原文由 charlee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

直接来自 redux 常见问题解答：

我可以在存储状态中放置函数、承诺或其他不可序列化的项目吗？

强烈建议您只将普通的可序列化对象、数组和原语放入您的存储中。将不可序列化的项目插入存储中在技术上是可行的，但这样做会破坏存储内容的持久化和再水化能力，并会干扰时间旅行调试。

如果您对诸如持久性和时间旅行调试之类的事情可能无法按预期工作没有问题，那么完全欢迎您将不可序列化的项目放入您的 Redux 存储中。归根结底，这是您的应用程序，如何实现它取决于您。与 Redux 的许多其他事情一样，请确保您了解其中涉及的权衡。

---

延伸阅读：

• 什么是时间旅行调试？

原文由 TimoStaudinger 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

添加@Timo 所说的内容，如果您想在状态树中设置 2 个状态之间的关系并使用计算值， reselect 最适合该场景。它允许创建 selectors 可用于定义计算状态。在您的情况下 author 可以使用 book 之上的选择器创建。 https://github.com/reactjs/reselect

原文由 Aditya Singh 发布，翻译遵循 CC BY-SA 3.0 许可协议