feat(store): modularize global state into campaign/wallet/ui slices - #1
Open
Darkdruce wants to merge 1 commit into
Open
feat(store): modularize global state into campaign/wallet/ui slices#1Darkdruce wants to merge 1 commit into
Darkdruce wants to merge 1 commit into
Conversation
…und-My-Cause#865) Split the monolithic store into three independently-testable Zustand slices with scoped selector hooks and named selectors. Slice layout ------------ store/campaignSlice.ts – transient campaign UI state: active campaign ID, optimistic contribution deltas, pledge modal open flag, pledge amount draft store/walletSlice.ts – re-exports useWalletStore + named selectors store/uiSlice.ts – re-exports notification/modal/theme stores + named selectors for each sub-domain store/index.ts – barrel; single import point for all slices Scoped selector hooks --------------------- hooks/useCampaignSlice.ts useCampaignSlice() / usePledgeModal() / useOptimisticDelta(contractId) hooks/useWalletSlice.ts useWalletSlice() / useWalletStatus() / useWalletSigning() hooks/useUiSlice.ts useUiSlice() / useNotifSlice() / useModalSlice() / useThemeSlice() Consumer migrations ------------------- - hooks/useWallet.ts → useWalletSlice() - hooks/useModal.ts → useModalSlice() - hooks/useNotifications.ts → useNotifSlice() - components/ModalRenderer → useModalSlice() - components/WalletSelectModalHost → useWalletSlice() Store interface exports ----------------------- WalletStoreState, NotificationStoreState, ModalStoreState, ThemeStoreState are now exported so the slice barrel and tests can reference them without circular imports. Unit tests (67 passing) ----------------------- store/__tests__/campaignSlice.test.ts – all reducer, action & selector paths store/__tests__/walletSlice.test.ts – all selector paths + derived selectors store/__tests__/uiSlice.test.ts – notification, modal, theme stores + all named selectors Existing tests: useWallet.test.tsx (11 tests) remain green. Closes Fund-My-Cause#865
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Splits the monolithic Zustand store into three independently-testable slices with scoped selector hooks, closing the source of unrelated re-renders and merge conflicts described in Fund-My-Cause#865.
Changes
New slice files
store/campaignSlice.tsstore/walletSlice.tsuseWalletStore+ named typed selectorsstore/uiSlice.tsstore/index.tsScoped selector hooks
hooks/useCampaignSlice.tsuseCampaignSlice(),usePledgeModal(),useOptimisticDelta(id)hooks/useWalletSlice.tsuseWalletSlice(),useWalletStatus(),useWalletSigning()hooks/useUiSlice.tsuseUiSlice(),useNotifSlice(),useModalSlice(),useThemeSlice()All hooks use
useShallowto prevent re-renders when unsubscribed fields change.Consumer migrations (no behaviour change)
hooks/useWallet.ts→useWalletSlice()hooks/useModal.ts→useModalSlice()hooks/useNotifications.ts→useNotifSlice()components/ModalRenderer→useModalSlice()components/WalletSelectModalHost→useWalletSlice()Backward compatibility
connectWith,disconnect,signTx,openModal, etc.)useWalletStore,useModalStore, etc.) continue to work — nothing removedTests
campaignSlice.test.ts,walletSlice.test.ts,uiSlice.test.ts)useWallet.test.tsx(11 tests) remains greenWhat was tested
npx tsc --noEmit— 0 errors in new filesnpx jest store/__tests__— 67/67 passnpx jest hooks/useWallet.test— 11/11 passCloses Fund-My-Cause#865