Pourquoi le magasin redux devrait-il être sérialisable?

Lors de la lecture du doc redux, j'ai constaté que le document mentionné ceci:

Pourtant, vous devriez faire de votre mieux pour que l'état soit sérialisable. Ne placez rien en dedans que vous ne pouvez pas facilement vous transformer en JSON.

Donc, ma question est, quel est l'avantage de garder l'état sérialisable? Ou, quelles sont les difficultés que je pourrais avoir si je mettais des données non sérialisables en magasin?

Et je crois que ce n'est pas unique à redux – Flux, même réagir L'état local suggère la même chose.

Pour m'expliquer, voici un exemple. Supposons que la structure du magasin soit comme celle-ci.

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

Cela devrait tout paraître bon. Cependant, lorsque j'essaie d'accéder à "l'auteur du livre 1", je dois écrire un code comme ceci:

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

Maintenant, je vais définir une classe:

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

Et mon magasin sera:

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

Pour que je puisse obtenir l'auteur facilement en utilisant:

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

La 2ème approche pourrait rendre l'objet «livre» conscient de la façon de récupérer les données de l'auteur, de sorte que l'appelant n'a pas besoin de connaître la relation entre les livres et les auteurs. Ensuite, pourquoi nous ne l'utilisons pas, au lieu de garder un "objet ordinaire" dans le magasin tout comme l'approche # 1?

Toutes les idées sont appréciées.

Directement à partir des FAQ de Redux :

Puis-je mettre des fonctions, des promesses ou d'autres éléments non sérialisables dans l'état de ma boutique?

Il est fortement recommandé de ne placer que des objets, des tableaux et des primitives ordinaires sérialisables dans votre magasin. Il est techniquement possible d'insérer des articles non sérialisables dans le magasin, mais cela peut interrompre la capacité à persister et à réhydrater le contenu d'un magasin, tout en interférant avec le débogage temporel.

Si vous êtes d'accord avec des problèmes tels que la persistance et le débogage temporel potentiellement impossible à fonctionner comme prévu, vous êtes le bienvenu de mettre des objets non sérialisables dans votre magasin Redux. En fin de compte, c'est votre application et la façon dont vous l'implémentez dépend de vous. Comme pour beaucoup d'autres choses sur Redux, assurez-vous que vous comprenez les compromis impliqués.

Autres lectures:

Qu'est-ce que le débogage du temps de voyage?

En ajoutant à ce que @Timo a déclaré, si vous souhaitez configurer la relation entre 2 états dans votre arbre d'état et utiliser les valeurs calculées, reselect est le meilleur ajustement pour ce scénario. Il permet de créer des selectors qui peuvent être utilisés pour définir des états calculés. Dans votre cas, l' author peut être créé en utilisant un sélecteur en haut du book . https://github.com/reactjs/reselect

La réponse de @timo est correcte. De plus, je recommande une bibliothèque appelée Redux-ORM pour fonctionner avec des données normalisées / relationnelles dans votre magasin Redux. Consultez mon commentaire récent sur Traitement de la cohérence des données dans un très grand magasin dans React + Redux SPA SaaS pour des liens vers plus d'informations.