Using rxjs with zustand ?

[GZLiew]

Hi want to know whether anyone tried using rxjs with zustand

[Akram-Adel]

I didn't try. But, and anyone can correct me if I'm wrong, I don't think you can use rxjs with zustand because the implementation of the create function doesn't return an object that has Interoperability point for observable/reactive libraries (you can read more about it here)

[jondewoo]

Here's a small example someone made: https://codesandbox.io/s/x2icz

[patdx]

Here's an attempt to implement a toStream function similar to mobx-utils that can take a store, selector and output a RxJS observable.

I'm not sure how to "correctly" infer the State shape given only the StoreApi interface, especially since various middleware like subscribeWithSelector override the subscribe() function and the subscribe function itself seems to have multiple signatures too. My attempt is shown at type InferState, but maybe the preferred way to do this in Zustand is to provide a middleware that exposes a new function on the StoreApi?

Note: Only very roughly tested with zustand/vanilla.

Please feel free to modify/use without attribution in any way you like.

// zustand-utils.ts
import type { Observable } from 'rxjs';
import { fromEventPattern } from 'rxjs';
import type { EqualityChecker, GetState, StateSelector } from 'zustand/vanilla';

type InferState<
  TStore extends {
    getState: GetState<object>;
  }
> = TStore extends {
  getState: GetState<infer TState>;
}
  ? TState
  : never;

/**
 * Create a zustand selector as an RxJS observable, inspired
 * by the MobX toStream API: https://github.com/mobxjs/mobx-utils#tostream
 */
export const toStream = <
  TStore extends {
    getState: GetState<object>;
  },
  TStateSlice,
  TState extends object = InferState<TStore>
>(
  store: TStore,
  selector: StateSelector<TState, TStateSlice>,
  options?: {
    equalityFn?: EqualityChecker<TStateSlice>;
    fireImmediately?: boolean;
  }
): Observable<TStateSlice> => {
  const result = fromEventPattern<TStateSlice>(
    (handler) =>
      (store as any).subscribe(
        selector,
        (value) => {
          handler(value);
        },
        options
      ),
    (_handler, signal) => signal()
  );

  return result;
};

Usage

import { combine, subscribeWithSelector } from 'zustand/middleware';
import create from 'zustand/vanilla';
import { toStream } from './zustand-utils';

const store = create(
  subscribeWithSelector(
    combine({ bears: 0 }, (set) => ({
      increase: (by: number) => set((state) => ({ bears: state.bears + by })),
    }))
  )
);

// type is Observable<number>
const bears$ = toStream(store, (state) => state.bears, {
  fireImmediately: true,
});

[patdx]

Thanks for the notes :) Okay I'll take that into consideration, Maybe I could just use the RxJS map and distinctUntilChanged operators instead of subscribeWithSelector.

[patdx]

I removed the dependency on subscribeToSelector and implemented the alternative solution based on the RxJS operator's map and distinctUntilChanged instead. Now it should work with a "plain" zustand store.

I made an NPM package here: https://www.npmjs.com/package/zustand-rx

Please note it's still hardly tested at all. Would welcome any feedback. Thanks!

[dai-shi]

Nice! Would you add it in https://github.com/pmndrs/zustand/wiki/3rd-Party-Libraries?

[GZLiew]

Well done @patdx 👍🏻! I help you added to the wiki https://github.com/pmndrs/zustand/wiki/3rd-Party-Libraries

[patdx]

Oh, wow! Thank you :)