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

Question

When reading the redux docs I found this:

Still, you should do your best to keep the state serializable. Don't put anything inside it that you can't easily turn into JSON.

So my question is, what's the benefit of keeping state serializable? Or, what difficulties I may have if I put non-serializable data into store?

And I believe this is not unique to redux - Flux, even React local state suggest the same thing.

---

To make me clear here is an example. Suppose the store structure is like this.

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

This should all looks good. However when I try to access "the author of Book 1", I have to write code like this:

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

Now, I'm going to define a class:

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

And my store will be:

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

So that I can get the author easily by using:

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

The 2nd approach could make the "book" object aware of how to retrieve the author data, so the caller does not need to know the relation between books and authors. Then, why we are not using it, instead of keeping "plain object" in the store just as approach #1?

Any ideas are appreciated.

Answer 1

Directly from the redux FAQs :

Can I put functions, promises, or other non-serializable items in my store state?

It is highly recommended that you only put plain serializable objects, arrays, and primitives into your store. It's technically possible to insert non-serializable items into the store, but doing so can break the ability to persist and rehydrate the contents of a store, as well as interfere with time-travel debugging.

If you are okay with things like persistence and time-travel debugging potentially not working as intended, then you are totally welcome to put non-serializable items into your Redux store. Ultimately, it's your application, and how you implement it is up to you. As with many other things about Redux, just be sure you understand what tradeoffs are involved.

---

Further reading:

• What is time travel debugging?

Answer 2

Adding to what @Timo said , If you want to setup relation between 2 states in your state tree and use computed values, reselect is the best suitable fit for that scenario. It allows to creare selectors which can be used to define computed states. In your case author can be created using a selector on top of book . https://github.com/reactjs/reselect

Answer 3

@timo 's answer is correct. In addition, I recommend a library called Redux-ORM to work with normalized/relational data in your Redux store. See my recent comment at Dealing with data consistency in a very large store in React + Redux SPA SaaS for links to more information.

Answer 4

Adding this because you asked for a suggestion. If you only want to create an object out of your class then you can simply create a function that returns an object. In your Book class it could be something like

function newBookObject({id, name}) {
    return {id, name}
}

And your store would look like

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

The object being returned can't contain any function's in it though, it should be just a plain static object with pure data and nothing else. You can't serialize something that isn't pure data.