zustand-sliver

Use Tiamut instead

Zustand Sliver

This package was build to provide zustand with redux-toolkit like api with some opinionated utilities

Usage

Install

npm i --save zustand-sliver

Create a sliver

import { createSliver } from 'zustand-sliver';

const bearSliver = createSliver({
  initialState: {
    firstName: 'Ted',
    lastName: 'Day',
  },
  selectors: {
    fullName(state) {
      return state.firstName + ' ' + state.lastName;
    },
  },
  actions: {
    updateFirstName(state, value: string) {
      state.firstName = value;
    },
  },
});

Create store hook

import { createStore } from 'zustand-sliver';

const store = createStore({
  bear: bearSliver,
});

Use as hook

function MyApp() {
  const firstName = store((state) => state.bear.firstName);
  const fullName = store.use.bear.fullName();
  const updateFirstName = store.actions.bear.updateFirstName;

  function changeFirstName() {
    updateFirstName('Ted ' + new Date().valueOf());
  }

  return (
    <div>
      <div>firstName: {firstName}</div>
      <div>fullName: {fullName}</div>
      <button onClick={changeFirstName}>Update Name</button>
    </div>
  );
}