Zustand injectors

[nixjs]

I work with redux a lot, my redux store is very large. Therefore I used the redux-injectors library.
It allows to automatically load reducers if needed, instead of loading them all first. It helps increase web performance.
I zustand should also have the feature to automatically download the store if needed.
Reference:
https://www.npmjs.com/package/redux-injectors

[dbritto-dev]

Nice, I'll take a look of that

[dbritto-dev]

@eltaljohn sure I can create a new example

[eltaljohn]

Hi @dbritto-dev, Do you have any update on this?

[dbritto-dev]

@eltaljohn -> https://codesandbox.io/p/devbox/lazy-load-slices-76fs6f

[eltaljohn]

I'm getting this error when enter the link:

[dbritto-dev]

I guess I need to create a new sandbox on stackblitz, seems codesandbox change their policies and now I ran out of credits

[HousseinSA]

What to thank you guys for create this amazing state manager

[akhilshastri]

sorry, may be i m not getting it correctly, can we have code split with zustand ..? pls share the doc link

[dbritto-dev]

@akhilshastri yes, you can. we don't have a guide for that but I could add it.

[wcwts0]

Hi @dbritto-dev, when will the guide document be ready? Or are there any new stackblitz demos? Thanks.

[dbritto-dev]

@wcwts0 I'm working on package to add support for zustand injectors as an external package, the only issue that I faced now is the typings haha, but should be available as zustand-injectors so you can use it like another middleware for zustand

[wcwts0]

@dbritto-dev Great job! Looking forward to the package.

[dbritto-dev]

@nixjs @wcwts0 @akhilshastri @eltaljohn good news ->

[dbritto-dev]

import { createStore } from "zustand/vanilla";
import { describe, expect, test, vi } from "vitest";
import { injectors } from "../src";

describe("injectors", () => {
  test("should auto inject slices", async () => {
    const incrementBears = () => {};
    const store = createStore<{ bears: number; incrementBears: () => void }>()(
      injectors(
        () => ({
          bears: 0,
          incrementBears,
        }),
        {
          "increment-bears": async () =>
            new Promise((resolve) => {
              setTimeout(
                () =>
                  resolve((set) => ({
                    incrementBears: () => {
                      set((currentState) => ({
                        bears: currentState.bears + 1,
                      }));
                    },
                  })),
                300,
              );
            }),
        },
      ),
    );

    expect(store.getState().incrementBears).toBe(incrementBears);

    await vi.waitFor(() => {
      expect(store.getState().incrementBears).not.toBe(incrementBears);
    });
  });

  test("should manual inject slices", async () => {
    const incrementBears = () => {};
    const store = createStore<{ bears: number; incrementBears: () => void }>()(
      injectors(() => ({
        bears: 0,
        incrementBears,
      })),
    );

    expect(store.getState().incrementBears).toBe(incrementBears);

    store.injectAsyncSliceInitializer(
      "increment-bears",
      async () =>
        new Promise((resolve) => {
          setTimeout(
            () =>
              resolve((set) => ({
                incrementBears: () => {
                  set((currentState) => ({
                    bears: currentState.bears + 1,
                  }));
                },
              })),
            300,
          );
        }),
    );

    await vi.waitFor(() => {
      expect(store.getState().incrementBears).not.toBe(incrementBears);
    });
  });

  test("should actions works from injected slices", async () => {
    const store = createStore<{ bears: number; incrementBears: () => void }>()(
      injectors(() => ({
        bears: 0,
        incrementBears: () => {},
      })),
    );

    expect(store.getState().bears).toBe(0);

    store.getState().incrementBears();

    expect(store.getState().bears).toBe(0);

    store.injectAsyncSliceInitializer(
      "increment-bears",
      async () =>
        new Promise((resolve) => {
          setTimeout(
            () =>
              resolve((set) => ({
                incrementBears: () => {
                  set((currentState) => ({
                    bears: currentState.bears + 1,
                  }));
                },
              })),
            300,
          );
        }),
    );

    await vi.waitFor(() => {
      store.getState().incrementBears();

      expect(store.getState().bears).toBe(1);
    });
  });
});

[dbritto-dev]

@nixjs @wcwts0 @akhilshastri @eltaljohn here you go -> https://github.com/zustandjs/zustand-injectors