Vovv

Vovv (pronounced vow) is a design pattern for writing react components based on data from promises.

Promises are great for handling asynchronous code, but can't be directly rendered in to a react component, or read in a redux selector. We need to model the promise state with a synchronous counterpart which is easy to render and update when the promise progresses.

This is where Vovv is useful. A Vovv has five properties:

export interface Vovv<V = any, E = any> {
  readonly error?: E
  readonly fulfilled: boolean
  readonly pending: boolean
  readonly rejected: boolean
  readonly value?: V
}

These property names are based on terminology from the promise specification. To quote MDN

A Promise is in one of these states:

• pending: initial state, neither fulfilled nor rejected.
• fulfilled: meaning that the operation was completed successfully.
• rejected: meaning that the operation failed.

A pending promise can either be fulfilled with a value or rejected with a reason (error).

To model a value which may or may not be available yet in your react or redux state, wrap it in a Vovv. Then it's simple to update, and simple to render.

import { vovv } from 'vovv'

function WelcomeSpan() {
  const [profile, setProfile] = useState()

  if (!profile) {
    vovv(fetch('/profile/me'), setProfile)
  }

  if (!profile || profile.pending) {
    return <span>Loading...</span>
  }
  if (profile.rejected) {
    return <span>Error: {profile.error.message}</span>
  }
  const { name } = profile.value
  return <span>Welcome {name}!</span>
}

Design Goals & Decisions

• Pattern for handling promise data synchronously
• Standards compliant
  • Uses terminology from the promise specification
  • Is a POJO, as recommended by react and redux
• Intuitive
• Minimal boilerplate
  • Helper methods abstract away repeated code
• Type safe
• Do one thing, do it well