• Introduction
• Core Libraries
• React
• Webpack
• Redux
• React Router
• Data Structure
• Overview
• Models
• Collections
• UI Patterns
• Filtering
• Pagination
• Infinite Scrolling
• WebSockets
• Visual Cues
• Optimistic Updates
• Dialogs
• Wizards
• Error Handling
• 404 Pages

Models

A model in Lore represents a single resource, such as a single Post the API might return from https://api.myapp.com/posts/1. The default data structure for a model looks like this:

post = {
  id: 1,
  cid: 'c1',
  state: 'UPDATING',
  data: {
    id: 1,
    title: 'Cornbread is yummy'
  },
  error: {}
}

While this structure may seem excessive at first, each property was chosen to address a different use case and all are necessary to make sure components can be entirely data-driven:

id

This field is the unique id assigned by the server (number, string, uuid, etc) and is necessary for updating and deleting data.

cid

This field is a client-side id assigned by Lore, and is unique for the lifetime of the application (it resets when you reload the application). It is necessary for supporting optimistic updates (displaying data in the application before it exists in the API)

state

This field represents what is happening to the resource, such as whether it is being created or updated, or whether there was an API error while fetching the resource. It is necessary in order to communicate to the user what is happening to data.

data

This field contains the JSON data returned by the server and is necessary to display meaningful content in the application.

error

This field captures any API errors that are returned (400/500 errors) and is necessary to communicate to the user what went wrong.