DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on • Originally published at thinkthroo.com

Zustand usage in workbench package in the Motia codebase.

#opensource #zustand

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)