Normalizrを使用して、ネストされた基本JSONを処理するにはどうすればよいですか？

Question

私は非常に標準的な入れ子JSON応答を持っています。 プロジェクトには多くのダッシュボードがあります。 ダッシュボード多くの図表があります。

私のスキーマを定義して使用する正しい方法は何ですか？

以下は、私のSchemas.js、私のAPIレスポンス、NormalizrがAPI応答を変換するコードです。

Schemas.js：

import { Schema, arrayOf, normalize } from 'normalizr'; 

// Create a schema for each model. 
const project = new Schema('projects'); 
const dashboard = new Schema('dashboard'); 
const chart = new Schema('chart'); 

// Projects have many dashboards. 
project.define({ 
    dashboards: arrayOf(dashboard) 
}); 

// Dashboards have many charts. 
dashboard.define({ 
    charts: arrayOf(chart) 
}); 

export const Schemas = { project, dashboard, chart }; 

マイAPIレスポンス：

{ 
    projects: [{ 
    id: 1, 
    name: "Project 1", 
    dashboards: [{ 
     id: 1, 
     name: "Dashboard 1", 
     charts: [{ 
     id: 1, 
     name: "Chart 1" 
     }, 
     { 
     id: 2, 
     name: "Chart 2" 
     }] 
    }, 
    { 
     id: 2, 
     name: "Dashboard 2", 
     charts: [{ 
     id: 3, 
     name: "Chart 3" 
     }, 
     { 
     id: 4, 
     name: "Chart 4" 
     }] 
    }] 
    }, 
    { 
    id: 2, 
    name: "Project 2", 
    dashboards: [{ 
     id: 3, 
     name: "Dashboard", 
     charts: [] 
    }] 
    }] 
} 

私はnormalize(response, Schemas.project);を行うアクションでこのJSONを受けます。これは応答全体をentities.projects.undefinedに移動するようです。

{ 
    entities: { 
    projects: { 
     undefined: { 
     projects: [{ 
      id: 1, 
      name: "Project 1", 
      ... 
     }, ...] 
     } 
    } 
    }, 
    result: undefined 
} 

正しくこのスキーマを定義して使用する必要がありますか？

参考文献：

https://github.com/gaearon/normalizr

https://github.com/reactjs/redux/blob/master/examples/real-world/actions/index.js

Answer 1

これはあなたに望ましい結果を与える必要があります。

normalize(response, { 
    projects: arrayOf(Schemas.project) 
}); 

をあなたに余分なキーを持っているので、プロジェクトのキーがnescessaryですresponse、arrayOf（）はAPIが戻ることを示します結果の配列。