Global State for React

npm i venti

import React from 'react'
import { useVenti } from 'venti'

export default function Book({ id }) {
  const state = useVenti()
  const { author, title } = state.get(`books.${id}`, {})
  const year = state.get(`books.${id}.year`)
  return <div>"{title}" by {author} ({year})</div>
}

import { state } from 'venti'

state.set('books.1', {
  author: 'John Steinbeck',
  title: 'Cannery Row',
  year: 1945
})

• state {State} (optional) defaults to singleton state if not provided
• Returns state that has been instrumented to update the component when applicable
• See StateEventer for more info

• path {Array|string} The path to get
• defaultValue {*} (optional) The value returned for undefined resolved values
• Returns the resolved value

• path {Array|string} The path of the property to set
• value {*} The value to set

• path {Array|string} The path of the property to unset

• path {Array|string} The path of the property to set
• transformFn {Function} transforms the current value to a new value
• defaultValue {*} (optional) the default value to pass into the transform function if the existing value at the given path is undefined

  state.update('counter', n => n + 1, 0)

If you don't want to use Venti's singleton state, you can do this:

import React from 'react'
import { State, useVenti } from 'venti'

const globalState = new State()
const useGlobalState = () => useVenti(globalState)

export default function Book({ id }) {
  const state = useGlobalState()
  const { title, year } = state.get(`books.${id}`)
  return <div>{title} ({year})</div>
}

• Venti: https://will123195.github.io/venti-performance/build/
• Redux: https://will123195.github.io/redux-performance/build/

• React State Museum - Packing List App

npm test

MIT