@scandinavia/ts-zustand

A wrapper for create function from zustand with it's middlewares

Examples

1. createStore (with persist):

// store.ts

import { createStore } from '@scandinavia/ts-zustand';

const initialState = {
  foo: 'init',
};

export const useStore = createStore('unique name')(initialState, set => ({
  setFoo: (newFoo: string) => set(state => (state.foo = newFoo)),
}));

// component.tsx

import {useStore} form './store.ts'

export const Component: React.FC = () => {
  const [foo, setFoo] = useStore(state => [state.foo, state.setFoo]);
  const hundleChange = (val: string) => setFoo(val);

  return (
    <div>
      <input
        type='text'
        onChange={({ target: { value } }) => hundleChange(value)}
        value={foo}
      />
    </div>
  );
};

2. createStoreWithOutPersist (without persist):

// store.ts

import { createStoreWithOutPersist } from '@scandinavia/ts-zustand';

const initialState = {
  foo: 'init',
};

export const useStore = createStoreWithOutPersist('unique name')(
  initialState,
  set => ({
    setFoo: (newFoo: string) => set(state => (state.foo = newFoo)),
  })
);

// component.tsx

import {useStore} form './store.ts'

export const Component: React.FC = () => {
  const [foo, setFoo] = useStore(state => [state.foo, state.setFoo]);
  const hundleChange = (val: string) => setFoo(val);

  return (
    <div>
      <input
        type='text'
        onChange={({ target: { value } }) => hundleChange(value)}
        value={foo}
      />
    </div>
  );
};

3. createStore with types:

// store.ts

import { createStore } from '@scandinavia/ts-zustand';
type StoreState = {
  foo?: string;
};

type StoreActions = {
  setFoo: (newFoo: string) => void;
};

const initialState: StoreState = {
  foo: 'init',
};

export const useStore = createStore('unique name')<StoreState, StoreActions>(
  initialState,
  set => ({
    setFoo: (newFoo: string) => set(state => (state.foo = newFoo)),
  })
);

// component.tsx

import {useStore} form './store.ts'

export const Component: React.FC = () => {
  const [foo, setFoo] = useStore(state => [state.foo, state.setFoo]);
  const hundleChange = (val: string) => setFoo(val);

  return (
    <div>
      <input
        type='text'
        onChange={({ target: { value } }) => hundleChange(value)}
        value={foo}
      />
    </div>
  );
};

API

1. CreateStore args:

• unique name: string, a unique name to display in devtools and used as key in persist middleware (if used)
• config: the base zustand store config contain the following:
  1. initialState: object, the initial state of the Store.
  2. actions: set=>actions, to set the state value.