为什么redux商店应该可序列化?

cha*_*lee 14 javascript flux reactjs redux

在阅读redux文档时,我发现该文档提到了这一点:

不过,你应该尽力保持状态可序列化.不要在里面放任何你不能轻易变成JSON的东西.

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

而且我相信这并不是redux-Flux所独有的,甚至React本地州也提出同样的建议.


让我明白这里是一个例子.假设商店结构是这样的.

{
    books: { 
        1: { id: 1, name: "Book 1", author_id: 4 }
    },
    authors: {
        4: { id: 4, name: "Author 4" }
    }
}
Run Code Online (Sandbox Code Playgroud)

这一切看起来都不错.但是,当我尝试访问"Book 1的作者"时,我必须编写如下代码:

let book = store.getState().books[book_id];
let author = store.getState().authors[book.author_id];
Run Code Online (Sandbox Code Playgroud)

现在,我要定义一个类:

class Book {
    getAuthor() {
        return store.getState().authors[this.author_id];
    }
}
Run Code Online (Sandbox Code Playgroud)

我的商店将是:

{
    books: {
        1: Book(id=1, name="Book 1")
    },
    ...
}
Run Code Online (Sandbox Code Playgroud)

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

let author = store.getState().books[book_id].getAuthor();
Run Code Online (Sandbox Code Playgroud)

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

任何想法都表示赞赏.

Tim*_*imo 17

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

我可以在我的商店状态中放置函数,承诺或其他不可序列化的项吗?

强烈建议您只将简单的可序列化对象,数组和基元放入商店.从技术上讲,可以将不可序列化的项目插入到商店中,但这样做会破坏保存和补充商店内容的能力,并且会干扰时间旅行调试.

如果您对持久性和时间旅行调试可能无法正常工作等问题感到满意,那么我们非常欢迎您将非可序列化的项目放入Redux商店.最终,它是您的应用程序,您如何实现它取决于您.与Redux的许多其他事情一样,请确保您了解所涉及的权衡.


进一步阅读:

  • 作为 Redux FAQ 的作者,这正是我写它的原因 :) 很高兴看到人们引用它并使用它来帮助回答问题! (2认同)