zustand-immer-store

A ~268B library to create type-safe redux-style stores with Zustand and Immer

Usage no npm install needed!

<script type="module">
  import zustandImmerStore from 'https://cdn.skypack.dev/zustand-immer-store';
</script>

README

Zustand Immer Store

npm npm bundle size

A ~268B library to create type-safe redux-style stores with Zustand and Immer

Live demo on codesandbox

Installation

yarn add zustand-immer-store

Usage

// counter-store.ts
import { createStore } from "zustand-immer-store";

const useCounterStore = createStore(
  { counter: 0 },
  {
    createActions: (set) => ({
      increment: () =>
        set((draft) => {
          draft.state.counter++;
        }),
      decrement: () =>
        set((draft) => {
          draft.state.counter--;
        }),
    }),
  }
);

export default useCounterStore;

// App.tsx
import useCounterStore from "./counter-store";

export default function App() {
  const { state, actions } = useCounterStore();
  return (
    <main>
      <div>
        <button onClick={actions.decrement}> - </button>
        <div>{state.count}</div>
        <button onClick={actions.increment}> + </button>
      </div>
    </main>
  );
}