Normalizing State

const vendingMachine = [
  {
    id: 1,
    name: 'Leela'
    location: {
      id: 1,
      name: 'Lake View'
    },
    inventory: [
      {
        id: 1,
        name: 'Yay Chips'
      },
      {
        id: 2,
        name: 'Chips of Cookies',
      }
    ]
  },
  {
    id: 2,
    name: 'Farnsworth',
    location: {
      id: 1,
      name: 'Lake View'
    },
    inventory: [
      {
        id: 1,
        name: 'Yay Chips'
      },
      {
        id: 3,
        name: 'Bag of Bretzels',
      }
    ]
  }
]
Location
Inventory
Location
Inventory
Machine
Machine
const vendingMachine = [
  {
    id: 1,
    name: 'Leela'
    location: {
      id: 1,
      name: 'Lake View'
    },
    inventory: [
      {
        id: 1,
        name: 'Yay Chips'
      },
      {
        id: 2,
        name: 'Chips of Cookies',
      }
    ]
  },
  {
    id: 2,
    name: 'Farnsworth',
    location: {
      id: 1,
      name: 'Lake View'
    },
    inventory: [
      {
        id: 1,
        name: 'Yay Chips'
      },
      {
        id: 3,
        name: 'Bag of Bretzels',
      }
    ]
  }
]
Rename: Lakeview
Rename: Lakeview

The case for normalization

  • Data is duplicated and leaves room for update errors

  • Data is deeply nested and hard to update

  • Updates to nested data leads to complete re-renders of unrelated components

{
  machines : {
    byId : {
      "machine1" : {
        id : "machine1",
        name: "Leela",
        snacks : ["inventory1", "inventory2"]
      },
      "machine2" : {
        id : "machine2",
        name : "Farnsworth",
        snacks : ["inventory1", "inventory3"]
      }
    },
    allIds : ["machine1", "machine2"]
  },
  
  snacks: {
    byId: {
      "inventory1": {
        id: "snack1",
        name: "Yay Chips"
      },
      "inventory2": {
        id: "snack2",
        name: "Chips of Cookies"
      },
      "inventory3": {
        id: "snack3",
        name: "Bag of bretzels"
      }
    },
    allIds: ["inventory1", "inventory2", "inventory3"]
  }
}
Id Name Inventory
machine1 Leela inventory1,
inventory2
machine2 Farnsworth inventory1,
inventory3
Id Name
inventory1 yay chips
inventory2 chips of cookie
inventory3 bag of  bretzels

Machines

Inventory

{
  machines : {
    byId : {
      "machine1" : {
        ...,
        inventory : ["inventory1", "inventory2"]
      },
      "machine2" : {
        ...,
        inventory : ["inventory1", "inventory3"]
      }
    },
  },
  
  inventory: {
    byId: {
      "inventory1": { ... },
      "inventory2": { ... },
      "inventory3": { ... }
      }
    },
  },
  
  inventoryInMachine: [
    {
      inventory_id: "inventory1",
      machine_id: "machine1"
    },
    {
      inventory_id: "inventory2",
      machine_id: "machine1"
    },
    {
      inventory_id: "inventory1",
      machine_id: "machine2"
    }
    ...
  ]
}

inventory and machine relationship table

Id Name Inventory
machine1 Leela inventory1,
inventory2
machine2 Farnsworth inventory1,
inventory3
Id Name
inventory1 yay chips
inventory2 chips of cookie
inventory3 bag of  bretzels

Machines

Inventory

Inventory in Machines

Inventory Id MachineId
inventory1 machine1
inventory2 machine1
inventory1 machine2
inventory3 machine2

Enter: Vuex ORM

Vuex ORM is a plugin for Vuex to enable Object-Relational Mapping access to the Vuex Store. Vuex ORM lets you create "normalized" data schema within Vuex Store.

What is Vuex ORM?

Step 1: Define Data Model

Step 2: Insert Data into Model

Step 3: Query Data!

Organizing Data in Vuex ORM

Step 1: Define Data Model

class Machine extends Model {
  static entity = 'machines'

  static fields () {
    return {
      id: this.attr(null),
      name: this.string('')
    }
  }

}

name of data entity

`this.$store
.state.entities`

Step 1: Define Data Model

class Inventory extends Model {
  static entity = 'inventory'

  static fields () {
    return {
      id: this.attr(null),
      name: this.string('')
    }
  }
}

fields/attributes in data entity

Step 2: Insert Data into Model

Machine.insert({ 
  data: [
    { id: 1, name: "Leela" },
    { id: 2, name: "Farnsworth" }
  ]
})

Step 2: Insert Data into Model

Inventory.insert({ 
  data: [ 
    { id: 1, name: 'Yay Chips' },
    { id: 2, name: 'Chips of Cookies' },
    { id: 3, name: 'Bag of Bretzels' },
    { id: 4, name: 'Corn Crisps' },
    { id: 5, name: 'Triangle Chips' } 
  ]
})

Step 3: Query Data

// Fetch all machines.
const machines = Machine.all()

 

 

// Fetch all snacks.
const snacks = Snack.all()
├── src/
  ├── components
  ├── App.vue

  └── store.js
├── models

  └── Machine.js
├── ...
└── public/
models
Machine.js

Vuex ORM Folder Structure

import Vue from "vue";
import Vuex from "vuex";

import VuexORM from "@vuex-orm/core";
import Machine from "@/models/Machine";

Vue.use(Vuex);

const database = new VuexORM.Database();
database.register(Machine);

export default new Vuex.Store({
  plugins: [VuexORM.install(database)],
  state: {},
  getters: {},
  mutations: {},
  actions: {
    init() {
      const machines = [...]
      Machine.insert({ data: machines });
    }
  }
});

store.js

initialize DB

register model to DB

add VuexORM as a plugin

import Vue from "vue";
import Vuex from "vuex";

import state from "./state";
import actions from "./actions";
import getters from "./getters";
import mutations from "./mutations";

import VuexORM from "@vuex-orm/core";
import Machine from "@/models/Machine";

Vue.use(Vuex);

const database = new VuexORM.Database();
database.register(Machine);

const store = new Vuex.Store({
  plugins: [VuexORM.install(database)],
  state,
  getters,
  mutations,
  actions
});

if (store._actions.init) {
  store.dispatch("init");
}

export default store;

store/index.js

import Machine from "@/models/Machine";

const init = () => {
  //initialize db here //
  const machines = [...]
  Machine.insert({ data: machines });
};

main.js

Let's create a machine model in Vuex ORM

Exercise Time!

[step-0]

https://github.com/shortdiv/vuex-normalize-state

The power of an ORM is revealed when relationships are established.

 

In Vuex ORM, relationships are defined as attributes in Model's static fields.

Relationships in Vuex ORM

  • One to One
  • One to Many
  • Many to One
  • ....

Relationships in Vuex ORM

Id Name Location
machine1 Leela Lake View
machine2 Farnsworth Wicker Park
machine3 Fry Lake View
Id Name
location1 Lake View
location2 Wicker Park
location3 Boystown

Machines

Locations

Id Name Inventory
machine1 Leela Lake View
machine2 Farnsworth Wicker Park
machine3 Fry Lake View
Id Name
location1 Lake View
location2 Wicker Park
location3 Boystown

Machines

Machines in Location

Locations MachineId
location1 machine1, machine3
location2 machine2
location3

Locations

class Location extends Model {
  static entity = 'locations'

  static fields () {
    return {
      id: this.attr(null),
      name: this.string(''),

      latlng: this.latlng(''),
      machines: this.hasMany(Machine, 'machine_id'),
    }
  }
}
​

define one to many relationship

import Machine from "@/models/Machine";

const init = () => {
  const machines = [
    {
      id: 1,
      name: "Leela",
      lastStocked: "Feb 2019",
      condition: "Working",
      location: "Lake View",
      latlng: [-87.6554288, 41.94705],
      inventory: []
    },
    ...
  ]
  Machine.insert({ data: machines });
};

export default {
  init,
  ...
}

store/actions.js

import Machine from "@/models/Machine";
import Location from "@/models/Location";

const init = () => {
  const machines = [
    {
      id: 1,
      name: "Leela",
      lastStocked: "Feb 2019",
      condition: "Working",
      location_id: 1,
      inventory: [
    },
    ...
  ]
  const locations = [
    {
      id: 1,
      name: "Lake View",
      latlng: [-87.6554288, 41.94705]
    },
    ...
  ]
  Machine.insert({ data: machines });
  Location.insert({ data: locations });
};

export {
  init,
  ...
}

store/actions.js

Let's create a location model in Vuex ORM

Exercise Time!

[step-1]

https://github.com/shortdiv/vuex-normalize-state

Id Name Inventory
machine1 Leela Lake View
machine2 Farnsworth Wicker Park
machine3 Fry Lake View
Id Name Locked Down
location1 Lake View false
location2 Wicker Park false
location3 Boystown false

Machines

Machines in Location

Locations MachineId
location1 machine1, machine3
location2 machine2
location3

Locations

Id Name Inventory
machine1 Leela Lake View
machine2 Farnsworth Wicker Park
machine3 Fry Lake View
Id Name Locked Down
location1 Lake View false
location2 Wicker Park true
location3 Boystown false

Machines

Machines in Location

Locations MachineId
location1 machine1, machine3
location2 machine2
location3

Locations

Query Builders in Vuex ORM

// Get Query Builder instance.
const query = Machine.query()

 

 

const machine = Machine
               .query()
               .where('location_id', 1).get()

get all machines at location_id 1, i.e. Lake View

Query Builders in Vuex ORM

├── src/
  ├── components
  ├── App.vue

  └── store.js
├── models

  └── Machine.js

├── helpers

  └── LocationQuery.js
├── ...
└── public/
helpers
LocationQuery.js
import Location from "@/models/Location";

const getLocationById = location_id => {
  const location = Location.query()
    .where("id", parseInt(location_id))
    .get();
  return location[0];
};

export { 
  getLocationById,
};

helpers/locationQueries.js

helpers/locationQueries.js

<template>
  <section class="action-section">
    <div class="machine-information">
      <div class="machine-id">
        <h3>Location</h3>
        <p>{{ selectedNeighborhood.name }}</p>
      </div>
      ...
    </div>
    ...
  </section>
</template>
<script>
import { 
  getLocationById
} from "@/helpers/locationQueries";

export default {
  name: "LocationView",
  props: {
   neighborhoodId: String // query param //
  }
  computed: {
    selectedNeighborhood() {
     return getLocationById(this.neighborhoodId);
    }
  }
}
</script>

components/LocationView.vue

Let's create some helper queries in Vuex ORM

Exercise Time!

[step-2]

https://github.com/shortdiv/vuex-normalize-state

class Snack extends Model {
  static entity = 'snacks'

  static fields () {
    return {
      id: this.attr(null),
      name: this.string(''),
      machines: this.belongsToMany(
                  Machine,
                  MachineSnack,
                  'snack_id',
                  'machine_id'
                ),
    }
  }
}
​
class MachineSnack extends Model {
  static entity = 'machineSnacks'

  static primaryKey = ['snack_id', 'machine_id']

  static fields () {
    return {
      snack_id: this.attr(null),
      name: this.string(''),
      machines: this.belongsToMany(
                  Machine,
                  MachineSnack,
                  'snack_id',
                  'machine_id'
                ),
    }
  }
}
​

Exercise Time!

Let's work

https://codepen.io/shortdiv/pen/zYGoVwe

Normalizing State

By shortdiv

Made with Slides.com

Normalizing State

  • 700

More from shortdiv