@cloudlu/zustand-store

A zustand store with immer, which makes zustand support class pattern.

Install

npm install --save @cloudlu/zustand-store

Usage

import React from 'react';
import { useStore } from './store';

const App = () => {
  const store = useStore();
  const onClick = () => {
    store.updateTime(Date.now());
  };
  const isLoading = store.loading.updateTime;

  return (
    <div>
      <div>current time: {isLoading ? 'loading...' : store.time} 😄"</div>
      <button onClick={onClick}>click me</button>
    </div>
  );
};

export default App;

./store.tsx

import Store from '@cloudlu/zustand-store';

class StoreClass extends Store.BaseStore<StoreClass> {
  public time = Date.now();

  @Store.loading()
  public async updateTime(time: number) {
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        this.set((state) => {
          state.time = time;
        });
        console.log(this.get().time);
        resolve();
      }, 2000);
    });
  }
}
export const useStore = Store.create(StoreClass);