🧸
zfy
  • Getting started
  • 🤓Guides
    • Creating & using a store
    • Persisting & rehydrating data
    • Using middlewares
    • Handling multiple stores
    • Type checking with TypeScript
  • 📚API reference
    • Types
      • CreateStoreType
      • CreateStoreConfigType
      • CreateStoreOptionsType
      • StoreType
      • ZfyMiddlewareType
      • InitStoresType
      • InitStoresResetOptionsType
    • createStore
    • initStores
    • PersistGate
    • useRehydrate
  • 🗃️Others
    • Help
    • Contributing
    • Changelog
    • GitHub
Powered by GitBook
On this page
  • API reference
  • name
  • data
  • reset
  • update

Was this helpful?

  1. API reference
  2. Types

StoreType

PreviousCreateStoreOptionsTypeNextZfyMiddlewareType

Last updated 3 years ago

Was this helpful?

Interface representing the data structure of any '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
}

API reference

name

  name: string

Name of the store to create.

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

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:

Must be unique per store ().

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

📚
ref
createStore()
zfy store
Returning new data from producers | Immer
Logo
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
}