zustand-slice
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

zustand-slice

A zustand middleware that provides an API like createSlice from Redux toolkit.

Install

npm install zustand-slice

or

yarn add zustand-slice

Usage

Create a store using slice middleware.

import create from 'zustand';
import slice from 'zustand-slice';

const useStore = create(
  slice({
    initialState: {
      bears: 0
    },
    reducers: {
      increasePopulation(state) {
        return {
          bears: state.bears + 1
        };
      },
      removeAllBears() {
        return {
          bears: 0
        };
      }
    }
  })
);

And use it as usual.

function BearCounter() {
  const bears = useStore(state => state.bears);
  return <h1>{bears} around here ...</h1>;
}

function Controls() {
  const increasePopulation = useStore(state => state.increasePopulation);
  return <button onClick={increasePopulation}>one up</button>;
}

Usage with typescript

By default, types will be inferred from initialState object and reducers payload, so there is no need to type the whole store explicitly.

License

MIT

Package Sidebar

Install

npm i zustand-slice

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

5.59 kB

Total Files

7

Last publish

Collaborators

  • sasa_djuric