6th: Migrate from redux to zustand
#9135
Open
+20,806
−19,949
Conversation
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
…use safer approach.
camd
requested review from
a team,
beatrice-acasandrei and
esanuandra
as code owners
camd
force-pushed
the
camd/redux-to-zustand
branch
from
89db6a1 to
4fd774e
Compare
camd
force-pushed
the
camd/redux-to-zustand
branch
2 times, most recently
from
92c1efe to
d33e5de
Compare
camd
force-pushed
the
camd/redux-to-zustand
branch
from
d33e5de to
f901b1e
Compare
The withView HOC is a class component that expected location and history props to be passed automatically by React Router. In React Router v6, these are no longer passed - you must use hooks instead. This caused the error: "Cannot read properties of undefined (reading 'state')" at line 21: this.default = this.props.location.state || defaultState; Fix by creating a ViewWithRouter wrapper component that: - Uses useLocation() and useNavigate() hooks - Injects location and navigate as props to the class component - Creates a history-like object with push/replace for backwards compatibility Also adds unit tests to verify the intermittent-failures routes render correctly with React Router v6. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace the withView class-based Higher Order Component with a modern useIntermittentFailuresData custom hook. This eliminates the need for the ViewWithRouter wrapper and makes the code more readable and testable. Changes: - Create useIntermittentFailuresData.jsx custom hook that encapsulates all state management and data fetching logic - Update MainView.jsx to use the hook directly instead of withView HOC - Update BugDetailsView.jsx to use the hook directly instead of withView HOC - Remove View.jsx (the old class-based HOC) - Update tests to work with the new hook-based implementation The hook uses: - useState for state management (replacing this.state) - useEffect for lifecycle (replacing componentDidMount) - useCallback for memoized functions - useRef for pending update tracking (replacing setState callbacks) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Zustand dependency - Create notificationStore.js with notify, clearNotification, clearExpiredNotifications, clearAllOnScreenNotifications actions - Update 17 components to use Zustand notifications instead of Redux - Export standalone notify function for use outside React components - Remove notify from Redux connect() mapDispatchToProps in all components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create Zustand pinnedJobsStore with all pinned jobs functionality - Export standalone functions for use outside React components - Migrate 7 components to use the new store: - PinBoard.jsx: Add Zustand subscription for class component reactivity - KeyboardShortcuts.jsx: Use standalone pinJob, unPinAll functions - DetailsPanel.jsx: Use setPinBoardVisible from Zustand - PushList.jsx: Use usePinnedJobsStore hook - PushHeader.jsx: Use standalone pinJobs function - PushJobs.jsx: Use standalone togglePinJob function - FiltersMenu.jsx: Use standalone pinJobs function - Remove pinnedJobs state from Redux mapStateToProps in all components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create selectedJobStore.js with Zustand implementation - Migrate job selection, clearing, and URL-based selection - Update all components to use Zustand selectedJobStore: - KeyboardShortcuts.jsx: Remove Redux connect, use store directly - DetailsPanel.jsx: Subscribe to Zustand, track selectedJob in state - PinBoard.jsx: Import setSelectedJob from Zustand store - TabsPanel.jsx: Use Zustand hooks for selectedJob - ActiveFilters.jsx: Use Zustand selectedJobStore - FiltersMenu.jsx: Use Zustand hooks - PushHeader.jsx: Import from Zustand store - PushJobs.jsx: Remove Redux connect, use memo only - PushList.jsx: Use Zustand for selectedJob 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create comprehensive pushStore.js with: - Nested jobs structure within pushes (jobs stored as push.jobs) - Derived getters: getJobById, getJobByTaskRun, getPushJobs - Actions: fetchPushes, pollPushes, updateRange, updatePushJobs - Pre-calculated unclassified counts per push - jobMap kept for compatibility during migration Migrate all components from Redux connect to Zustand: - PushList, Push, PushHeader, PushLoadErrors, PushActionMenu - DetailsPanel, PinBoard, ActionBar, AnnotationsTab - PerformanceTab, PerfData, SideBySide - SecondaryNavBar, ActiveFilters - CustomJobActions, BugFiler, InternalIssueFiler - App.jsx (updated imports, removed useDispatch) Class component pattern used: Zustand subscription in componentDidMount/componentWillUnmount with state initialization from usePushStore.getState() All components now use Zustand instead of Redux for: - pushList, jobMap, decisionTaskMap, bugSummaryMap - loadingPushes, jobsLoaded - allUnclassifiedFailureCount, filteredUnclassifiedFailureCount - revisionTips 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
camd
force-pushed
the
camd/redux-to-zustand
branch
from
f901b1e to
d2a14c7
Compare
camd
force-pushed
the
camd/redux-to-zustand
branch
from
d2a14c7 to
e82299c
Compare
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## master #9135 +/- ##
==========================================
+ Coverage 80.01% 81.32% +1.30%
==========================================
Files 601 604 +3
Lines 32715 34030 +1315
Branches 3314 3189 -125
==========================================
+ Hits 26178 27675 +1497
+ Misses 6371 6185 -186
- Partials 166 170 +4 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
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.
Also optimize the
jobMapfor job selection.