useMappedState

use-mapped-state.js

import { useEffect, useReducer, useRef } from 'react' // alias to 'preact/hooks'
import equal from '@app-elements/equal'

export function useMappedState (store, mapper) {
  const [, forceRender] = useReducer(n => n + 1, 0)

  const mapperRef = useRef()
  const stateRef = useRef()

  let mappedState = mapper !== mapperRef.current
    ? mapper(store.getState())
    : stateRef.current

  useEffect(() => {
    mapperRef.current = mapper
    stateRef.current = mappedState
  })

  useEffect(() => {
    function handleStateChange () {
      const newSelectedState = mapperRef.current(store.getState())
      if (!equal(newSelectedState, stateRef.current)) {
        stateRef.current = newSelectedState
        forceRender({})
      }
    }

    const unsubscribe = store.subscribe(handleStateChange)
    handleStateChange()

    return () => unsubscribe()
  }, [store, mapper])

  return mappedState
}