Subscribe to state changes outside of React

[dan-lee]

Hey @RichardLindhout! I am still very happy with this tiny but powerful library :)

I'd like to listen for state changes to trigger side effects (e.g. logging, tracking). For now I need to this in store.set itself, but I'd like to have this side effect free.

Maybe something along those lines:

const unsubscribe = myRidgeStore.subscribe((prevState, newState) => {
  // side effects here
})

Unfortunately onSet doesn't suffice as it happens after the state already has changed, I would also be fine with another option at store creation.
But in my opinion the approach I suggested is a little bit more approachable.

Thanks :)

[RichardLindhout]

I think your approach is nice. Can be added fairly easily I think

[RichardLindhout]

Will try to add within two weeks

[dan-lee]

Let me know if I can help you in any way :)

[RichardLindhout]

I forgot this, I think it would be great but maybe the newest first since you don't always need the previous one

myRidgeStore.subscribe((new) => {}
myRidgeStore.subscribe((new, old) => {}

[RichardLindhout]

And possible unsubscribing?

const unsubscribe = myRidgeStore.subscribe((new) => {}
unsubscribe()

[dan-lee]

I think it would be great but maybe the newest first since you don't always need the previous one

Totally makes sense! Also, the unsubscribe part looks good to me

[RichardLindhout]

Hey dan-lee would this also be fine?

onSet: (newState, prevState) => {
     
    },

Because it will be more difficult than I though to support this new feature without increasing the bundle and small bundle is one the selling points

[dan-lee]

Yeah, this could work, but unfortunately wouldn't be very helpful as the side effects could not be implemented separately.
We've worked around by implementing subscribe to the ridge state with a Proxy object and nanoevents:

import { newRidgeState, StateWithValue } from 'react-ridge-state'
import { createNanoEvents } from 'nanoevents'

type Subscriber<T> = (data: { newState: T }) => void

export interface SubscribeState<T> extends StateWithValue<T> {
  subscribe: (subscriber: Subscriber<T>) => void
}

export const createState = <T>(initialValue: T) => {
  const events = createNanoEvents<{
    CHANGE: Subscriber<T>
  }>()

  const ridgeState = newRidgeState<T>(initialValue, {
    onSet: (newState) => {
      events.emit('CHANGE', { newState })
    },
  })

  return new Proxy<typeof ridgeState>(ridgeState, {
    get: (target, prop) => {
      if (prop === 'subscribe') {
        return (sub: Subscriber<T>) => {
          return events.on('CHANGE', sub)
        }
      }

      return Reflect.get(target, prop)
    },
  }) as SubscribeState<T>
}