具有嵌套对象数组的 Normalizr答案

【问题标题】：Normalizr with nested array of objects具有嵌套对象数组的 Normalizr
【发布时间】：2018-05-27 10:16:40
【问题描述】：

我有一个嵌套的对象数组，如下所示：

var matchs = [
    {
      id: 10689,
      sport: 'Tennis',
      players: [
        {
        id: 22,
        name:'Rafa Nadal',
        country: 'Spain',
        odds: [
           {id: 1, bookie_1: 1.60},
           {id: 2, bookie_2: 1.61},
           {id: 3, bookie_3: 1.62},
           ]
        },
        {
        id: 23,
        name:'Roger Federer',
        country: 'Spain',
        odds: [
           {id: 4, bookie_1: 2.60},
           {id: 5, bookie_2: 2.61},
           {id: 6, bookie_3: 2.62},
          ]
        }
      ]
    },
    {
      id: 12389,
      sport: 'Tennis',
      players: [
        {
        id: 45,
        name:'Fernando Verdasco',
        country: 'Spain',
        odds: [
           {id: 7, bookie_1: 2.60},
           {id: 8, bookie_2: 2.61},
           {id: 9, bookie_3: 2.62},
          ]
        },
        {
        id: 65,
        name:'Andy Murray',
        country: 'Spain',
        odds: [
           {id: 10, bookie_1: 1.60},
           {id: 11, bookie_2: 1.61},
           {id: 12, bookie_3: 1.62},
          ]
        }
      ]
    }
  ];

我想使用 normalizr 来简化数组并与 redux 一起使用。我已经阅读了 Normalizr 文档，但它的示例很少，我不知道我做错了什么。

我尝试了以下代码但没有成功。我得到的结果是一个未定义的数组。

  import { normalize, schema } from 'normalizr';   

  const match = new schema.Entity('matchs');
  const player = new schema.Entity('players');
  const odd = new schema.Entity('odds');

  match.define({
    player: [player],
    odd: [odd]
  });      

  console.log(normalize(matchs, [match]));

我需要这样的东西：

{
  result: "123",
  entities: {
    "matchs": { 
      "123": { 
        id: "123",            
        players: [ "1","2" ],
        odds: [ "1", "2" ]
      }
    },
    "players": {
      "1": { "id": "1", "name": "Rafa Nadal" },
      "2": { "id": "2", "name": "Andy Murray" }
    },
    "odds": {
      "1": { id: "1", "bookie_1": "1.20" }
      "2": { id: "2", "bookie_2": "1.21" }
      "3": { id: "3", "bookie_3": "1.22" }
    }
  }
}

【问题讨论】：

你想怎么看最终数组？
我用我想要的结果更新代码

标签： javascript redux normalizr

【解决方案1】：

这是使用最新版本 normalizr 的解决方案

const odds = new schema.Entity("odds");
const players = new schema.Entity("players", {
  odds: [odds]
});
const matches = new schema.Entity("matches", { players: [players] });
const normalizedData = normalize(data, [matches]);

它将您问题中的数据分组为

{
 "entities": {
    "odds": {
        "1": {
            "id": 1,
            "bookie_1": 1.6
        }
    },
    "players": {
        "22": {
            "id": 22,
            "name": "Rafa Nadal",
            "country": "Spain",
            "odds": [
                1,
                2,
                3
            ]
        }
    },
    "matches": {
        "10689": {
            "id": 10689,
            "sport": "Tennis",
            "players": [
                22,
                23
            ]
        }
    }
},
"result": [
    10689
]

}

【讨论】：

【解决方案2】：

您可以通过调整流程和合并策略来实现您想要的结果。我没有时间为你做腿部工作，但我在这里详细解释一下方法：

https://medium.com/@JustinTRoss/normalizing-data-into-relational-redux-state-with-normalizr-47e7020dd3c1

【讨论】：

【解决方案3】：

我找不到只使用 normalizr 的直接解决方案，所以我唯一的选择是在传递给规范器之前预先格式化数据。

const preformattedData = data.map(sport => {
  const oddArrays = sport.players.map(player => player.odds || []);
  return {
    ...sport,
    odds: [].concat.apply([], oddArrays)
  }
})

const odd = new schema.Entity('odds')
const player = new schema.Entity('players',
  {
    odds: [ odd ]
  }
)
const sport = new schema.Entity('sports',
  {
    players: [ player ],
    odds: [odd]
  }
)

const normalizedData = normalize(preformattedData, [ sport ]);

演示：https://codesandbox.io/s/20onxowzwn

【讨论】：

【解决方案4】：

我想这就是你需要的

const odd = new schema.Entity('odds');
const player = new schema.Entity('players' , { odds: [ odd]});

const match = new schema.Entity('matchs', {players: [player]});

但是结果会有所不同，因为你的 json 它的结构是这样的，我的意思是，赔率键是玩家的孩子，而不是比赛的孩子，因此结果会是这样。

看看控制台

【讨论】：