Why should redux store be serializable?

Question

When reading the redux document, I found that the document mentioned this:

However, you should do everything possible to maintain a serializable state. Do not invest anything in it that you cannot easily turn into JSON.

So my question is, what is the use of maintaining state serialization? Or, what difficulties can I have if I put non-serializable data in the storage?

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

---

So I understand, here is an example. Suppose the store structure is similar to this.

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

Everything should look good. However, when I try to access the "author of book 1", I have to write this code:

 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 easily get the author using:

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

The second approach can make the book object aware of how to get the author’s data, so the caller does not need to know the relationship between the books and the authors. Then why don’t we use it, instead of storing a “simple object” in a store just like approach No. 1?

Any ideas are welcome.

Answer 1

Directly from frequently asked questions of reduction :

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

It is highly recommended that you place only simple serializable objects, arrays, and primitives in your store. It is technically possible to insert non-serializable elements into the storage, but this may impair the ability to save and store the contents of the store, as well as interfere with debugging while traveling.

If you agree with things such as persistence and disconnection from time travel that are potentially not working as intended, then you can completely place non-serializable items in your Redux store. Ultimately, this is your application, and how you implement it is up to you. As with many other things about Redux, just make sure you understand the tradeoffs involved.

---

Further reading:

• What is debugging while traveling?

Answer 2

Adding to what @Timo said: if you want to establish a relationship between two states in a state tree and use the calculated values, reselect is the best fit for this scenario. This allows you to create selectors that 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 answer is correct. In addition, I recommend the Redux-ORM library for working with normalized / relational data in your Redux repository. See My last comment in Working with data consistency in a very large repository in React + Redux SPA SaaS for links to more information.