web-dev-qa-db-ja.com

reduxストアをシリアル化できるのはなぜですか？

Reduxのドキュメントを読んでいると、ドキュメントに次のように記載されていることがわかりました。

それでも、状態をシリアル化できるように最善を尽くす必要があります。簡単にJSONに変換できないものを中に入れないでください。

だから私の質問は、状態をシリアライズ可能に保つことの利点は何ですか？または、シリアル化できないデータをストアに配置すると、どのような問題が発生する可能性がありますか？

そして、これはreduxに固有のものではないと私は信じています-フラックス、Reactローカル状態でも同じことを示唆しています。

ここで明確にするために、例を示します。店舗構造がこんな感じだとしましょう。

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

これはすべて良さそうです。ただし、「Book 1の作成者」にアクセスしようとすると、次のようなコードを作成する必要があります。

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();

2番目のアプローチでは、「本」オブジェクトに著者データの取得方法を認識させることができるため、呼び出し元は本と著者の関係を知る必要がありません。それでは、アプローチ＃1と同じように、ストアに「プレーンオブジェクト」を保持する代わりに、なぜそれを使用しないのでしょうか。

どんなアイデアでも大歓迎です。

javascriptreactjsreduxflux
15
charlee

---から直接 redux FAQ ：

関数、Promise、またはその他のシリアル化できないアイテムをストアの状態にすることはできますか？

プレーンなシリアル化可能なオブジェクト、配列、およびプリミティブのみをストアに配置することを強くお勧めします。シリアル化できないアイテムをストアに挿入することは技術的には可能ですが、そうすると、ストアのコンテンツを永続化して再水和する機能が損なわれるだけでなく、タイムトラベルのデバッグが妨げられる可能性があります。

永続性やタイムトラベルデバッグなどが意図したとおりに機能しない可能性がある場合は、シリアル化できないアイテムをReduxストアに入れることを歓迎します。最終的に、それはあなたのアプリケーションであり、それをどのように実装するかはあなた次第です。 Reduxに関する他の多くのことと同様に、どのようなトレードオフが関係しているかを必ず理解してください。

さらに読む：

17
Timo

@Timoの発言に加えて、状態ツリーの2つの状態間の関係を設定し、計算値を使用する場合は、reselectがそのシナリオに最適です。これにより、計算された状態を定義するために使用できるcreare selectorsが可能になります。あなたの場合、authorはbookの上にあるセレクターを使用して作成できます。 https://github.com/reactjs/reselect

1
Aditya Singh

@timoの答えは正しいです。さらに、Reduxストアの正規化/リレーショナルデータを処理するには、 Redux-ORM というライブラリをお勧めします。詳細へのリンクについては、 React + Redux SPA SaaS の非常に大きなストアでのデータ整合性の処理）の最近のコメントを参照してください。

0
markerikson