React, Redux, normalizr. new schema.Array of schema.Object

533
June 21, 2017, at 04:06 AM
Problem

I am using the nice library https://github.com/paularmstrong/normalizr to normalize the data from api to my state in react redux application. I opened the following issue on the library because I though there is a case which is not handle, but apparently I am using wrongly the library. It is why I am asking the nice react-redux community if you can help me.

The problem is the following. I am trying to make a normalize an array of Object which contains entity, it is not itself an entity but it contains some. Here a concrete exemple

Example

Here is a small snippet to understand it:

import { schema, normalize } from 'normalizr'
const test = {
  items: [
    {
      type: 'TYPE_1',
      items: [{
        id: 1,
        name: 'Item1'
      },{
        id: 2,
        name: 'Item2'
      }]
    },
    {
      type: 'TYPE_2',
      foos: [{
        id: 1,
        name: 'Foo 1'
      },{
        id: 2,
        name: 'Foo 2'
      }]
    }
  ]
}
const item = new schema.Entity('items')
const foo = new schema.Entity('foos')
const TYPE_1 = {items: [item]}
const TYPE_2 = {foos: [foo]}
const response = {
  items: new schema.Array({
    TYPE_1,
    TYPE_2,
  }, 'type')
}
normalize(test, response)

Output

Here's what I expect to see when I run the above:

{
  "entities": {
    "items": {
      "1": {
        "id": 1,
        "name": "Item1"
      },
      "2": {
        "id": 2,
        "name": "Item2"
      }
    },
    "foos": {
      "1": {
        "id": 1,
        "name": "Foo 1"
      },
      "2": {
        "id": 2,
        "name": "Foo 2"
      }
    }
  },
  "result": {
    "items": [
      {
        "type": "TYPE_1",
        "items": [
          1,
          2
        ]
      },
      {
        "type": "TYPE_2",
        "foos": [
          1,
          2
        ]
      }
    ]
  }
}

Here's what I actually see when I run the above:

{
  "entities": {
    "items": {
      "1": {
        "id": 1,
        "name": "Item1"
      },
      "2": {
        "id": 2,
        "name": "Item2"
      }
    },
    "foos": {
      "1": {
        "id": 1,
        "name": "Foo 1"
      },
      "2": {
        "id": 2,
        "name": "Foo 2"
      }
    }
  },
  "result": {
    "items": [
      {
        "id": {
          "type": "TYPE_1",
          "items": [
            1,
            2
          ]
        },
        "schema": "TYPE_1"
      },
      {
        "id": {
          "type": "TYPE_2",
          "foos": [
            1,
            2
          ]
        },
        "schema": "TYPE_2"
      }
    ]
  }
}

PS: Here the issue I tried to open: https://github.com/paularmstrong/normalizr/issues/273

For now I will read from the id props as well when I am not sure it makes sense.

PS: I am afraid I will never get an answer but well let's try.

READ ALSO
Get displayed text for an input element

Get displayed text for an input element

My website is using Angular Material which is changing the format of the text entered in my type='time' input fieldI'd like to be able to assert against this text but none of the methods I can find for getting it are providing the actual text displayed

341
\n is not recognized when trying to define name in two lines

\n is not recognized when trying to define name in two lines

I have multiple tabs, the name of the tab should appear in two lines

282
Unwanted delay before requestAnimationFrame?

Unwanted delay before requestAnimationFrame?

An interesting case where IE actually runs the way I want :-) I made this function to do SVG animations via requestAnimationFrame (for this example I omitted the value calculations, etc

286
What is the purpose of a self executing function in javascript?

What is the purpose of a self executing function in javascript?

In javascript, when would you want to use this:

458