Redux DevTools

Screen.Recording.2022-05-10.at.02.35.49.mov

BitAboutState is connected with Redux DevTools

It allows you to fully control the state by DevTools and Flipper (on React Native)

It basically works out of the box and has the following features:

• Multiple store instances, with different names (useStoreName hook)
• Recording toggle
• Dispatching external props changing action
• Dispatching side-effect action (unexpected state change)
• Dispatching setState actions
• Jumping to past actions/states
• Reseting state
• Importing state
• Rollback / Skip action (probably will never be possible - the state it's not fully deterministic)
• Reorder (unsupported)
• Commiting action from devTools

Recording side-effects

Side effects are unexpected, often internal, state changes or refreshes. They can be triggered by ending some asynchronous job (API call) or catching some event (for example from @bit-about/event).

You can wrap your side-effects functions into the useSideEffect, to make the state change expected and followable in dev tools.

const [StoreProvider, useStore] = state(() => {
  const [autoIncrementJohn, setAutoIncrementJohn] = useState(0)

  const incrementJohn = useSideEffect(
    () => setAutoIncrementJohn((value) => value + 1),
    'autoIncrementJohn'
  )

  useEffect(() => {
    const interval = setInterval(incrementJohn, 5000)
    return () => clearInterval(interval)
  }, [incrementJohn])

  return {
    autoIncrementJohn
  }
})

Giving a name to store

When you have many stores you can give them a name using useStoreName hook.

const [StoreProvider, useStore] = state(() => {
  useStoreName('MyCustomStore')

  const [alice, setAlice] = useState(0)

  return {
    alice,
    setAlice
  }
})

which is resulting in:

Interloping with @bit-about/event

Listeners in @bit-about/event are basically plain side-effects, so you can wrap them in useSideEffect as well

const [StoreProvider, useStore] = state(() => {
  const [isLightOn, setIsLightOn] = useState(false)

  useEvent({
    lightSwitchPressed: useSideEffect(() => setIsLightOn(value => !value), 'toggleLight')
  })

  return {
    isLightOn
  }
})