Time travel

Wouldn't it be great if we could have global stores and component-bound stores and still keep a single, global record of all state changes? Oh! We can.

import React from 'react'
import { StoreApi, createContext } from 'react-zedux'
import { createStore } from 'zedux'

class CounterApi extends StoreApi {
  static idCounter = 0

  id = CounterApi.idCounter++
  store = createStore().hydrate(0)
}

const rootStore = createStore()
const CounterContext = createContext(CounterApi)

const Counter = () => (
  <CounterContext.Injector
    onMount={counterStore => {

      // Attach to the root store when the component mounts
      rootStore.use({
        [counterStore.id]: counterStore
      })
    }}
    onUnmount={counterStore => {

      // Unattach this store when the component unmounts
      rootStore.use({
        [counterStore.id]: null
      })
    }}
  >
    {counterStore => JSON.stringify(rootStore.state)}
  </CounterContext.Injector>
)

<Context.Injector> and <Context.Provider> accept onMount and onUnmount properties that will be called when the component is mounted and unmounted. These hooks are designed specially for attaching/detaching child stores to/from parent stores.

Here we accessed the rootStore globally, but we can just as easily wrap <CounterContext.Injector> in a rootStore Provider/Consumer. On that note, we don't have to attach everything directly to the root. This is a hierarchy, after all! We could attach it to a store that attaches to a store that attaches to the root. Yeah, like, whoa.

While not too hard, this attach-to-parent-store process is pretty involved. React Zedux does not currently offer a higher-level way of doing this as any abstraction here would be pretty opinionated. But it isn't too hard to make your own!