title: Normalize API data for use in Redux
body: <p>I have the following data coming from an API:</p>
  
  <pre><code>const data = {
    id: 1,
    name: 'myboard',
    columns: [
      {
        id: 1,
        name: 'col1',
        cards: [
          { id: 1, name: 'card1' },
          { id: 2, name: 'card2' }
        ]
      },
      {
        id: 2,
        name: 'col2',
        cards: [
          { id: 3, name: 'card3' },
          { id: 4, name: 'card4' }
        ]
      },
    ]
  }
  </code></pre>
  
  <p>As you can see, there are essentially 3 nested levels. The top level contains an <code>id</code>, <code>name</code> and a list of <code>columns</code>. Each <code>column</code> contains an <code>id</code>, <code>name</code> and a list of <code>cards</code>. Each <code>card</code> has an <code>id</code> and <code>name</code>.</p>
  
  <p>I wish to normalize the data for use in Redux as presented <a href="https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape#designing-a-normalized-state" rel="nofollow noreferrer">here</a>. I am using <a href="https://github.com/paularmstrong/normalizr" rel="nofollow noreferrer">normalizr</a> to do this as follows:</p>
  
  <pre><code>const card = new schema.Entity('cards');
  const column = new schema.Entity('columns', {
    cards: [card]
  });
  const board = new schema.Entity('boards', {
    columns: [column]
  });
  
  normalize(data, board)
  </code></pre>
  
  <p>This results in the following:</p>
  
  <pre><code>{
    "entities": {
      "cards": {
        "1": {
          "id": 1,
          "name": "card1"
        },
        "2": {
          "id": 2,
          "name": "card2"
        },
        "3": {
          "id": 3,
          "name": "card3"
        },
        "4": {
          "id": 4,
          "name": "card4"
        }
      },
      "columns": {
        "1": {
          "id": 1,
          "name": "col1",
          "cards": [1, 2]
        },
        "2": {
          "id": 2,
          "name": "col2",
          "cards": [3, 4]
        }
      },
      "boards": {
        "1": {
          "id": 1,
          "name": "myboard",
          "columns": [1, 2]
        }
      }
    },
    "result": 1
  }
  </code></pre>
  
  <p>What I can't seem to figure out is how to have each section (ie: <code>cards</code>, <code>columns</code>, <code>boards</code>) split into two sections, namely <code>byId</code> and <code>allIds</code> as per the Redux article referenced above.</p>
  
  <p>Essentially this is to make ordering, sorting etc easier in a React application. Im using the latest version of normalizr (3.2.4).</p>