https://github.com/zustandjs/zustand-injectors
A sweet way of lazy load slices
https://github.com/zustandjs/zustand-injectors
Last synced: 9 months ago
JSON representation
A sweet way of lazy load slices
- Host: GitHub
- URL: https://github.com/zustandjs/zustand-injectors
- Owner: zustandjs
- License: mit
- Created: 2024-04-12T23:28:21.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-14T12:57:52.000Z (about 2 years ago)
- Last Synced: 2025-09-21T20:43:42.643Z (9 months ago)
- Language: TypeScript
- Size: 77.1 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# zustand-injectors
[](https://github.com/zustandjs/zustand-injectors/actions?query=workflow%3ACI)
[](https://www.npmjs.com/package/zustand-injectors)
[](https://bundlephobia.com/result?p=zustand-injectors)
[](https://discord.gg/MrQdmzd)
A sweet way to lazy load slices
## Install
```bash
npm i zustand zustand-injectors
```
## Usage
**Auto lazy load slices**
```tsx
// src/create-decrement-slice.ts
import type { StateCreator } from "zustand";
import type { CounterStore } from "./counter-store";
export const createDecrementSlice: StateCreator<
CounterStore,
[],
[],
{ decrementCount: () => void }
> = (set) => ({
decrementCount: () => {
set((currentState) => ({ count: currentState.count - 1 }));
},
});
```
```tsx
// src/counter-store.ts
import { createStore } from "zustand";
import { injectors } from "zustand-injectors";
export type CounterState = { count: number };
export type CounterActions = {
incrementCount: () => void;
decrementCount: () => void;
};
export type CounterStore = CounterState & CounterActions;
export const counterStore = createStore()(
injectors(
(set) => ({
count: 0,
incrementCount: () => {
set((currentState) => ({ count: currentState.count + 1 }));
},
decrementCount: () => {},
}),
{
"decrement-slice": () =>
import("./create-decrement-slice").then(
(mod) => mod.createDecrementSlice
),
}
)
);
```
```tsx
// main.tsx
import { useLayoutEffect } from "react";
import { useStore } from "zustand";
const Component = () => {
const { count, incrementCount, decrementCount } = useStore(counterStore);
return null;
};
```
**Manual lazy load slices**
```tsx
// src/create-decrement-slice.ts
import type { StateCreator } from "zustand";
import type { CounterStore } from "./counter-store";
export const createDecrementSlice: StateCreator<
CounterStore,
[],
[],
{ decrementCount: () => void }
> = (set) => ({
decrementCount: () => {
set((currentState) => ({ count: currentState.count - 1 }));
},
});
```
```tsx
// src/counter-store.ts
import { useLayoutEffect } from "react";
import { createStore } from "zustand";
import { injectors } from "zustand-injectors";
export type CounterState = { count: number };
export type CounterActions = {
incrementCount: () => void;
decrementCount: () => void;
};
export type CounterStore = CounterState & CounterActions;
export const counterStore = createStore()(
injectors((set) => ({
count: 0,
incrementCount: () => {
set((currentState) => ({ count: currentState.count + 1 }));
},
decrementCount: () => {},
}))
);
```
```tsx
// src/main.tsx
import { useLayoutEffect } from "react";
import { useStore } from "zustand";
const Component = () => {
const { count, incrementCount, decrementCount } = useStore(counterStore);
useLayoutEffect(() => {
counterStore.injectAsyncSliceInitializer("decrement-slice", () =>
import("./create-decrement-slice").then((mod) => mod.createDecrementSlice)
);
}, []);
return null;
};
```