Recompose: [Question] Redux state change -> Observable stream using Recompose

[jcheroske]

Can someone tell me the pattern for getting a series of store updates converted into a stream, rather than just a series of prop changes? I'm new to rxjs, and can't help but think that the recompose stream HOCs are designed for this use-case.

My use-case is a snackbar component. I want it to respond to store state changes, but at its own pace. I want the store->props changes to push into a stream, and then I want my snackbar to pull off the stream. Is there a way to easily do this with recompose?

[istarkov]

series of store updates converted into a stream, rather than just a series of prop changes

What this exactly mean? Can you describe what you want without using words like stream.

[jcheroske]

Sure. I'm trying to implement a simple notification system. Things happen in the app, and a notification reducer updates a notification string. Multiple notifications may fire quickly. I want to have a snackbar connected to that state, but the snackbar is opening and closing at its own pace. So, how can I have a react component that responds to a series of prop changes, but buffers the changes and processes them serially? Or would it be better to buffer the notifications in the redux store by storing them in an array instead? Then, every time the snackbar closes, it could fire an action to remove the last notification.

[TrySound]

@jcheroske Do you want to use store as event system?

[istarkov]

IMO storing in the array is better as otherwise it will be possible to lost some (for example 2 simultaneous notifications).
And yes recompose streams will allow you to add timeouts for new notifications and will provide a way to show them easily.

Pseudocode:

mapPropsStream(props$ => {
  const closedSnacksCount$ = props$
    .map(({ snackList }) => snackList.length)
    .distinctUntilChanged()
    .delay(SNACK_VISIBLE_TIME)
    .startWith(0);

   return props$.combineLatest(closedSnacksCount$, (props, closedSnacksCount) => ({
      ...props,
      visibleSnacks:  props.snackList.slice(closedSnacksCount),
   }))

})

Also not a problem to add close events etc, here is simple implamentation with delay before snack go out

[jcheroske]

Thank you so much!