React Reduxアプリケーションの状態を正規化する例は何ですか？

Question

私はRedux Reducers docsを読んでいて、状態を正常化する方法を知ることはできません。この例の現在の状態は次のとおりです。

{ 
    visibilityFilter: 'SHOW_ALL', 
    todos: [ 
    { 
     text: 'Consider using Redux', 
     completed: true, 
    }, 
    { 
     text: 'Keep all state in a single tree', 
     completed: false 
    } 
    ] 
} 

以下に従った場合の例はありますか？

例えば

、維持todosById：{ID - > TODO}とドス：配列は 内の状態は、実際のアプリでより良いアイデアだろうが、我々は簡単な 例を維持しています。

Answer 1

に正規化することができます。

[{ 
    id: 1, 
    title: 'Some Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}, { 
    id: 2, 
    title: 'Other Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}] 

が、これは

{ 
    result: [1, 2], 
    entities: { 
    articles: { 
     1: { 
     id: 1, 
     title: 'Some Article', 
     author: 1 
     }, 
     2: { 
     id: 2, 
     title: 'Other Article', 
     author: 1 
     } 
    }, 
    users: { 
     1: { 
     id: 1, 
     name: 'Dan' 
     } 
    } 
    } 
} 

正規化の利点は何ですか

をway-標準化することができますか？

あなたが望む状態ツリーの正確な部分を抽出することができます。

たとえば、記事に関する情報を含むオブジェクトの配列があります。その配列から特定のオブジェクトを選択する場合は、配列全体を反復処理する必要があります。最悪の場合は、目的のオブジェクトがアレイに存在しないことです。これを克服するために、データを正規化します。

データを正規化するには、各オブジェクトの一意の識別子を別の配列に格納します。その配列をresultsとしましょう。

result: [1, 2, 3 ..]

（第2スニペットを参照）idとしてキーを持つオブジェクトにオブジェクトの配列を変換します。そのオブジェクトをentitiesと呼んでください。

最終的にid 1でオブジェクトにアクセスするには、単にentities.articles["1"]を実行します。

Answer 2

これにはnormalizrを使用できます。

NormalizrはJSONとスキーマを取り、ネストされたエンティティをIDで置き換え、辞書内のすべてのエンティティを収集します。

例えば、

[{ 
    id: 1, 
    title: 'Some Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}, { 
    id: 2, 
    title: 'Other Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}] 

この例では、直線Normalizrからである

{ 
    result: [1, 2], 
    entities: { 
    articles: { 
     1: { 
     id: 1, 
     title: 'Some Article', 
     author: 1 
     }, 
     2: { 
     id: 2, 
     title: 'Other Article', 
     author: 1 
     } 
    }, 
    users: { 
     1: { 
     id: 1, 
     name: 'Dan' 
     } 
    } 
    } 
}