Global state

useStore.js

import { useState, useEffect } from 'react'

function setState(newState, updateContext) {
  this.state = { ...this.state, ...newState }
  this.listeners &&
    this.listeners.forEach(([context, listener]) => {
      updateContext === context && listener(this.state)
    })
}

function useCustom(context) {
  const [, newListener] = useState()
  useEffect(() => {
    this.listeners && this.listeners.push([context, newListener])
    return () => {
      this.listeners = this.listeners
        ? this.listeners.filter(([, listener]) => listener !== newListener)
        : []
    }
  }, [newListener, context])
  return [this.state, this.actions]
}

function associateActions(store, actions) {
  const associatedActions = {}
  actions.forEach((value, key) => {
    if (typeof value === 'function') {
      associatedActions[key] = value.bind(null, store)
    }
    if (typeof value === 'object') {
      associatedActions[key] = associateActions(store, value)
    }
  })
  return associatedActions
}

export default (actions, initialState = {}) => {
  if (!actions) {
    throw new Error('You need to set up some actions')
  }
  const store = {
    state: initialState,
    listeners: [],
    setState: () => null,
  }
  store.setState = setState.bind(store)
  store.actions = associateActions(store, actions)
  return useCustom.bind(store)
}

Usage:

// store.js
import useStore from './useStore'

const initialState = {
  menuOpen: false,
  page: 'home'
}

const actions = {
  toggleMenu: async (store) => {
     store.setState({ menuOpen: !store.state.menuOpen })
  },
  changePage: (store, page) => {
    store.setState({ page })
  },
}

const store = useStore(actions, initialState)

export default store

Usage in a component

import useGlobal from './store.js'

const MyComponent = (props) => {
  const [{ menuOpen, page }, { changePage, toggleMenu }] = useGlobal()
  return <div onClick={menuOpen}>{page}</div>
}