zustand-rx

https://zustand-rx.vercel.app/en/
Admin
zustand-rx is a tool that allows you to subscribe to a Zustand store as an RxJS observable,...
Tokens:3,119
Snippets:8
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install zustand-rx

Source: https://zustand-rx.vercel.app/en/index

Installs the zustand-rx library along with its peer dependencies, Zustand and RxJS, using either npm or yarn package managers.

```bash
npm install zustand-rx zustand rxjs
```

```bash
yarn add zustand-rx zustand rxjs
```

--------------------------------

### Zustand Store Setup with RxJS

Source: https://zustand-rx.vercel.app/en/example

Demonstrates how to create a Zustand store using vanilla Zustand and integrate it with RxJS Observables using the `zustand-rx` library. It shows basic state management with an `increment` function and how to convert state properties into Observables.

```TypeScript
import { toStream } from 'zustand-rx';
import { combine } from 'zustand/middleware';
import { createStore } from 'zustand/vanilla';
import { immer } from 'zustand/middleware/immer';

export const store = createStore(
  combine({ bears: 0 }, (set) => ({
    increment: () => set((state) => ({ bears: state.bears + 1 })),
  })),
);

export const immerStore = createStore(
  immer(
    combine({ bears: 0 }, (set) => ({
      increment: () => set((state) => ({ bears: state.bears + 1 })),
    })),
  ),
);

// Test to make sure immer store works too
toStream(immerStore, (store) => store.bears);
/* Observable<number> */

export const bears$ = toStream(store, (state) => state.bears, {
  fireImmediately: true,
});
export const state$ = toStream(store, undefined, {
  fireImmediately: true,
});

```

--------------------------------

### Install zustand-rx

Source: https://zustand-rx.vercel.app/en/introduction

Install the zustand-rx library along with Zustand and RxJS using npm or yarn. This is the first step to integrating Zustand stores with RxJS observables.

```bash
npm install zustand-rx zustand rxjs
# or
yarn add zustand-rx zustand rxjs
```

--------------------------------

### Usage: Convert Zustand Store to RxJS Observable

Source: https://zustand-rx.vercel.app/en/index

Demonstrates how to use the `toStream` function from 'zustand-rx' to convert a Zustand store into an RxJS observable. It shows the setup of a simple Zustand store with a 'bears' state and an 'increase' function, then creates an observable stream for the 'bears' state, optionally firing immediately.

```javascript
import { toStream } from 'zustand-rx';
import { combine } from 'zustand/middleware';
import create from 'zustand/vanilla';

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

const bears$ = toStream(store, (state) => state.bears, {
  fireImmediately: true
});

```

--------------------------------

### Usage: Convert Zustand Store to RxJS Observable

Source: https://zustand-rx.vercel.app/en/introduction

Demonstrates how to use the `toStream` function from 'zustand-rx' to convert a Zustand store into an RxJS observable. It shows the necessary imports, store creation, and stream subscription, including options like `fireImmediately` and `equalityFn`.

```javascript
import { toStream } from 'zustand-rx';
import { combine } from 'zustand/middleware';
import create from 'zustand/vanilla';
// NOTE: alternatively, the React version also seems to work:
// import create from 'zustand';
const store = create(
  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,
});
```

--------------------------------

### React Integration with Zustand-Rx Observables

Source: https://zustand-rx.vercel.app/en/example

Shows how to use Zustand-Rx observables within a React component using the `observable-hooks` library. It demonstrates subscribing to state changes and triggering actions from the Zustand store via button clicks.

```JavaScript
import { useObservableState } from 'observable-hooks';
import { useEffect } from 'react';
import { store, bears$, state$ } from './store';

export function ExampleReact() {
  useEffect(() => {
    console.log(`bears$`, bears$, 'state$', state$);
  }, []);

  const bears1 = useObservableState(bears$);
  const bears2 = useObservableState(bears$);
  const state = useObservableState(state$);

  console.log(`render! bears: ${bears1} ${bears2}`, state);

  return (
    <>
      <button
        style={{ background: 'gray', border: '1px darkgray solid' }}
        onClick={store.getState().increment}
      >
        Increase
      </button>
      <div>Bears 1: {bears1}</div>
      <div>Bears 2: {bears2}</div>
    </>
  );
}

```

--------------------------------

### Svelte Integration with Zustand-Rx Observables

Source: https://zustand-rx.vercel.app/en/example

Illustrates how to integrate Zustand-Rx observables into a Svelte component. It shows how to subscribe to observables using the `$` syntax and trigger store actions from Svelte's event handlers.

```Svelte
<script>
  import { store, bears$ } from "./store";
  const increment = store.getState().increment
</script>
<style>
  .button {
    background: gray;
    border: 1px darkgray solid;
  }
</style>

<button class="button" on:click={increment}>
  Increase
</button>

<div>Bears 1: {$bears$}</div>
<div>Bears 2: {$bears$}</div>

```

--------------------------------

### Convert Zustand Selector to RxJS Observable

Source: https://zustand-rx.vercel.app/en/modules

The `toStream` function transforms a Zustand store selector into an RxJS Observable. It allows for reactive data streams from your Zustand state. You can optionally provide an equality function for shallow comparisons and a flag to emit the initial value immediately. This function is inspired by MobX's `toStream`.

```typescript
function toStream<TStore, TState, TSlice>(store: TStore, selector?: (value: TState) => TSlice, { equalityFn?, fireImmediately? }: { equalityFn?: (previous: TSlice, current: TSlice) => boolean; fireImmediately?: boolean; } = {}): Observable<TSlice>
```
Tokens:
Raw