StoreType

Interface representing the data structure of any zfy store's getState()output.

src/types.ts

import type { State } from 'zustand'

interface StoreType<StoreDataType> extends State {
  name: string
  data: StoreDataType
  reset: () => void
  update: (producer: (data: StoreDataType) => void) => void
}

https://github.com/colorfy-software/zfy/blob/main/src/types.ts#L16-L21

import type {
  State,
  GetState,
  SetState,
  StoreApi,
  StateCreator,
  UseBoundStore,
  EqualityChecker,
} from 'zustand'
import type {
  PersistOptions,
  StoreApiWithPersist,
  StoreApiWithSubscribeWithSelector,
} from 'zustand/middleware'

export interface StoreType<StoreDataType> extends State {
  name: string
  data: StoreDataType
  reset: () => void
  update: (producer: (data: StoreDataType) => void) => void
}

export type CreateStoreType<StoreDataType> = UseBoundStore<
  StoreType<StoreDataType>
> & {
  persist?: StoreApiWithPersist<StoreType<StoreDataType>>['persist']
  subscribeWithSelector?: StoreApiWithSubscribeWithSelector<
    StoreType<StoreDataType>
  >['subscribe']
}

export type CreateStoreConfigType<
  StoreDataType,
  StoreApiType extends StoreApi<StoreType<StoreDataType>> = StoreApi<
    StoreType<StoreDataType>
  >
> = StateCreator<
  StoreType<StoreDataType>,
  SetState<StoreType<StoreDataType>>,
  GetState<StoreType<StoreDataType>>,
  StoreApiType
>

export interface CreateStoreOptionsType<StoreDataType> {
  log?: boolean
  subscribe?: boolean
  persist?: Omit<
    PersistOptions<StoreType<StoreDataType>>,
    'name' | 'blacklist' | 'whitelist'
  > & {
    name?: string
    getStorage: Exclude<
      PersistOptions<StoreType<StoreDataType>>['getStorage'],
      undefined
    >
  }
  customMiddlewares?: ZfyMiddlewareType<StoreDataType>[]
}

export type ZfyMiddlewareType<
  StoreDataType,
  StoreApiType extends StoreApi<StoreType<StoreDataType>> = StoreApi<
    StoreType<StoreDataType>
  >
> = (
  storeName: string,
  config: CreateStoreConfigType<StoreDataType>,
  options?: CreateStoreOptionsType<StoreDataType>
) => CreateStoreConfigType<StoreDataType, StoreApiType>

export type InitStoresResetOptionsType<StoreDataType> = {
  omit?: Array<keyof StoreDataType>
}

export type InitStoresType<StoresDataType> = {
  stores: {
    [StoreNameType in keyof StoresDataType]: CreateStoreType<
      StoresDataType[StoreNameType]
    >
  } & {
    rehydrate: () => Promise<boolean>
    reset: (options?: InitStoresResetOptionsType<StoresDataType>) => void
  }
  useStores: <StoreNameType extends keyof StoresDataType, Output>(
    storeName: StoreNameType,
    selector: (data: StoresDataType[StoreNameType]) => Output,
    equalityFn?: EqualityChecker<Output>
  ) => Output
}

API reference

name

  name: string

Name of the store to create.

Must be unique per store (ref).

data

  data: StoreDataType

Data you want to save in your store. Can be of any type. As the zustand doc states:

You can put anything in it: primitives, objects, functions.

reset

reset: () => void

Function that, once invoked, resets the store's data to the value of the initialData provided to createStore()'s 2nd argument.

update

update: (producer: (data: StoreDataType) => void) => void

Function that allows you to update your data. The current value is provided to the producer function and thanks to Immer: you don't have to care about immutability at all. Example:

const dealershipStore = createStore('dealership', { flagship: 'Ford Mustang' })

dealershipStpre.getState().update(data => {
  data.flagship = 'Porsche Taycan'
})

For convenience, we recommend extracting update() in a function once, and then using that function to perform changes. Example:

const dealershipStore = createStore('dealership', {
  isOpened: true,
  flagship: 'Ford Mustang',
})
const updateDealership = dealershipStore.getState().update

updateDealership(data => {
  data.isOpened = false
})

updateDealership(data => {
  data.isOpened = true
  data.flagship = 'Porsche Taycan'
})

Be careful to respect Immer's rules when it comes to producing a new state:

Returning new data from producers | Immer