Time travel debugging with Focal! (use Redux dev tools browser extension)

redux-devtools.ts

import { Atom } from '@grammarly/focal'
import { createStore } from 'redux'

declare global {
  interface Window {
    __REDUX_DEVTOOLS_EXTENSION__?: () => undefined
  }
}

/**
 * Call this on your root state atom to enable Redux dev tools debugging.
 *
 * For example:
 *   const state = Atom.create(initialState)
 *   createAtomStore(state) // <- this line enables redux devtools
 */
export function createAtomStore<TState>(atom: Atom<TState>) {
  const store = createStore(
    (_: TState, action: { type: '@@ATOM_UPDATE', newState: TState }) => {
      return action.newState
    },
    atom.get(),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )

  let dispatch = true
  let setAtom = true

  const atomSub = atom.subscribe(x => {
    if (dispatch) {
      setAtom = false
      store.dispatch({ type: '@@ATOM_UPDATE', newState: x })
      setAtom = true
    }
  })

  const storeSub = store.subscribe(() => {
    if (setAtom) {
      dispatch = false
      // @TODO why do we get an undefined state here if you click commit right after
      // the store was initialized?
      atom.modify(x => store.getState() !== undefined ? store.getState() : x)
      dispatch = true
    }
  })

  return {
    store,
    unsubscribe() {
      atomSub.unsubscribe()
      storeSub()
    }
  }
}