Zustand

  const state = useAppStateStore()
const darkMode = useAppStateStore(state => state.darkMode);
const toggleDarkMode = useAppStateStore(state => state.toggleDarkMode);
  

  const setApiToken = appState.getState().setApiToken
  

  import {create} from "content/docs/cheatsheets/js/zustand";

type
Item = {
  id: number
  name: string
}

interface
ItemStore
{
  items: Item[]
  createItem: (item: Item) => Item
  updateItem: (item: Item) => Item | void
    deleteItem
:
  (item: Item) => Item | void
}

const useItemStore = create < ItemStore > ()((set) => ({
  items: [],
  createItem: (item: Item) => {
    set((state) => ({items: [...state.items, item]}));
    return item
  },

  updateItem: (item: Item) => {
    const id = item.id
    const updatedItem = item
    set(state => ({
      items: state.items.map((item) => {
        return item.id === id ? {...item, ...updatedItem} : item
      })
    }))
    return updatedItem
  },

  deleteItem: (item: Item) => {
    const id = item.id
    set(state => ({
      items: state.items.filter(item => id !== item.id)
    }))
    return item
  }
}))

export default useItemStore
  

  import {create} from "zustand";
import {createJSONStorage, persist} from "zustand/middleware";

type AppConfig = {
    [key: string]: any;
}

const initialConfig: AppConfig = {
    darkMode: false
}

interface AppConfigStore {
    darkMode: boolean
    toggleDarkMode: () => void
    resetAppConfig: () => void
}

const useAppConfigStore = create<AppConfigStore>()(
    persist(
        (set, get) => ({
            darkMode: false,
            toggleDarkMode: () => set(() => ({darkMode: !get().darkMode})),
            resetAppConfig: () => set(initialConfig),
        }),
        {
            name: 'config-storage',
            storage: createJSONStorage(() => localStorage)
        }
    ))
export default useAppConfigStore