DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on • Originally published at thinkthroo.com

Zustand usage in workbench package in the Motia codebase.

In this article, we review how Zustand is used in workbench package in motia codebase. We will look at:

  1. useFlowStore

  2. useTabsStore

Press enter or click to view image in full size

We picked only two stores as examples.

useFlowStore

useFlowStore is used in packages/workbench/…/flow/flow-page.tsx as shown below:

import { useFlowStore } from '@/stores/use-flow-store'
import { FlowConfigResponse, FlowResponse } from '@/types/flow'
import { useStreamItem } from '@motiadev/stream-client-react'
import { FlowView } from './flow-view'

export const FlowPage = () => {
  const selectedFlowId = useFlowStore((state) => state.selectedFlowId)
Enter fullscreen mode Exit fullscreen mode

and this is defined in packages/workbench/stores/use-flow-store.ts as shown below:

export const useFlowStore = create(
  persist<UseFlowStore>(
    (set) => ({
      flows: [],
      setFlows: (flows) => set({ flows }),
      selectFlowId: (flowId) =>
        set((state) => {
          if (state.selectedFlowId === flowId) {
            return state
          }
          return { selectedFlowId: flowId }
        }),
    }),
    {
      name: 'motia-flow-storage',
      storage: createJSONStorage(() => localStorage),
    },
  ),
)
Enter fullscreen mode Exit fullscreen mode

useTabsStore

useTabsStore is used in packages/workbench/src/App.tsx as shown below:

import { StatesPage } from './components/states/states-page'
import { useTabsStore } from './stores/use-tabs-store'

enum TabLocation {
  TOP = 'top',
  BOTTOM = 'bottom',
}

export const App: FC = () => {
  const tab = useTabsStore((state) => state.tab)
  const setTopTab = useTabsStore((state) => state.setTopTab)
  const setBottomTab = useTabsStore((state) => state.setBottomTab)
Enter fullscreen mode Exit fullscreen mode

and this useTabsStore is defined as shown below:

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

interface TabsState {
  tab: Record<string, string>;
  setTopTab: (tab: string) => void;
  setBottomTab: (tab: string) => void;
}

export const useTabsStore = create(persist<TabsState>((set) => ({
  tab: {
    top: "flow",
    bottom: "tracing",
  },
  setTopTab: (tab) => set((state) => ({ tab: { ...state.tab, top: tab } })),
  setBottomTab: (tab) => set((state) => ({ tab: { ...state.tab, bottom: tab } })),
}), {
  name: 'motia-tabs-storage',
  storage: createJSONStorage(() => localStorage),
}))
Enter fullscreen mode Exit fullscreen mode

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

  1. https://github.com/MotiaDev/motia/blob/main/packages/workbench/src/components/flow/flow-page.tsx#L6

  2. https://github.com/MotiaDev/motia/blob/main/packages/workbench/src/stores/use-flow-store.ts#L11

  3. https://github.com/MotiaDev/motia/blob/main/packages/workbench/src/App.tsx#L22

  4. https://github.com/MotiaDev/motia/blob/main/packages/workbench/src/stores/use-tabs-store.ts

Top comments (0)