Zustandを用いた実践的状態管理

Transcript

2. 自己紹介 株式会社カケハシ 生成AI研究開発チーム ソフトウェアエンジニア Nokogiri(@nkgrnkgr) 2
3. 株式会社カケハシ 医療体験をしなやかに 主に薬局向けの業務シ ステムを提供 ヘルステックスタート アップ 3
4. 今日話すこと 1. useState以上の状態管理が必要なケース 2. Zustandを使った設計・実装プラクティス 3. まとめ 話さないこと 1. Zustand の基本的な使い方 2. 他のライブラリとの比較 4
5. useState以上の状態管理が必要なケース 状態間の依存 散在する状態更新ロジック 頻繁な再描画によるパフォーマンス問題 5
6. 具体的な事例：AI在庫の入庫ダイアログ 動的に変わる初期値 更新時に他の状態を更新する 6
8. Zustandによる解決 中央集権的な状態管理 アクションによる状態更新の集約 セレクターによる効率的な再描画制御 8
9. Zustand 具体的なプラクティス 9
10. 1. Actions に状態更新ロジックを集約する const useStoreStockDialogStore = create<StoreStockDialogStore>()((set) => ({ actions: { updateStoreStockReason: (reason) => { set((state) => ({ ...state, // プライマリ状態の更新 storeStockInfoFormValues: { ...state.storeStockInfoFormValues, storeStockReason: reason, // 他の状態への副作用 counterPartyId: INITIAL_FORM_VALUES.counterPartyId, counterPartyName: INITIAL_FORM_VALUES.counterPartyName, }, stockOperationConfig: { ...state.stockOperationConfig, counterParty: null, }, })); }, }, })); 10
11. 2. セレクターによる効率的な状態参照 // selectors.ts export const selectFeeAmount = (state: StoreStockDialogStore) => state.storeStockInfoFormValues.feeAmount; // Component const feeAmount = useStoreStockDialogStore(selectFeeAmount); 状態の参照を一箇所に集約 Stateのデータ構造を変えてもコンポーネント側に影響を出さない 純粋関数なのでテストしやすい 11
12. 3. useShallow を使った配列への浅い参照 const selectMedicineIds = (state: StoreStockDialogStore) => state.medicineInfoList.map((i) => i.medicineId); function MedicineList() { const ids = useStoreStockDialogStore(useShallow(selectMedicineIds)); return ( <ul> {ids.map((id) => ( <MedicineListItem key={id} medicineId={id} /> ))} </ul> ); } 配列の内容が変わらなければ再描画を防ぐ。パフォーマンスの向上 createSelector でも代替可能 12
13. 4. 末端コンポーネントでの状態参照 function MedicinePrice() { const medicinePrice = useStoreStockDialogStore(selectMedicinePrice); return ( <input type="text" value={medicine.price} /> ) } 必要な状態のみを参照 不要な再描画を防ぐ 13
14. 5. Store のライフサイクル管理 // StoreProvider.tsx export const StoreProvider = ({ children }: { children: ReactNode }) => { const storeRef = useRef<StoreApi<StoreStockDialogStore>>(); if (!storeRef.current) { storeRef.current = createStoreStockDialogStore(); } return ( <StoreContext.Provider value={storeRef.current}> {children} </StoreContext.Provider> ); }; Initialize state with props React コンポーネントのライフサイクルと連動 Stateの破棄漏れを防ぐ 14
15. 6. immer を利用した安全な更新 const useStore = create<Store>()( immer((set) => ({ nested: { value: 0 }, actions: { updateNested: (value) => { set((state) => { state.nested.value = value; // 直接代入可能 }); }, }, })) ); 不変性を保ちながら直感的な更新 バグの減少 15
16. まとめ 開発体験の向上 コードの可読性と保守性の向上 アクションによる明確な状態更新 セレクターによる統一的な状態参照 パフォーマンス向上 再レンダリング回数の大幅削減 複雑な状態管理でもスムーズな動作 詳細記事: https://kakehashi-dev.hatenablog.com/entry/2024/09/10/110000 16
19. We are Hiring! 株式会社カケハシで一緒に働きま せんか？ ソフトウェアエンジニア募集中！ 医療体験をしなやかにする技術開 発 採用情報: https://kakehashi- dev.com/recruit/ 19