Studio: Refactor AuthProvider into Redux slice#2778
Studio: Refactor AuthProvider into Redux slice#2778katinthehatsite wants to merge 19 commits intotrunkfrom
Conversation
| @@ -1,4 +1,4 @@ | |||
| import { createSlice, PayloadAction } from '@reduxjs/toolkit'; | |||
There was a problem hiding this comment.
This is not related directly to changes in this PR. This is something that my linter flagged that needed to be fixed and was present on trunk
fredrikekelund
left a comment
fredrikekelund
left a comment
There was a problem hiding this comment.
Thanks for tackling this, @katinthehatsite.
The end goal with this refactor should be to remove AuthProvider altogether. That, and doing something about setWpcomClient from src/stores/wpcom-api are the two big changes needed here, IMO.
There was a problem hiding this comment.
We should remove this context provider altogether. Components can easily consume Redux state and dispatch actions. There's no point in keeping this provider as a thin wrapper around the Redux slice.
There was a problem hiding this comment.
Should be done ✅
| export const selectIsAuthenticated = ( state: RootState ) => state.auth.isAuthenticated; | ||
| export const selectUser = ( state: RootState ) => state.auth.user ?? undefined; |
There was a problem hiding this comment.
| export const selectIsAuthenticated = ( state: RootState ) => state.auth.isAuthenticated; | |
| export const selectUser = ( state: RootState ) => state.auth.user ?? undefined; | |
| export const authThunks = { | |
| handleInvalidToken, | |
| initializeAuth, | |
| authTokenReceived, | |
| authLogout, | |
| }; | |
| export const authSelectors = { | |
| selectIsAuthenticated: ( state: RootState ) => state.auth.isAuthenticated, | |
| selectUser: ( state: RootState ) => state.auth.user ?? undefined, | |
| }; |
We've followed this pattern in some other Redux slices. I think it's helpful to namespace selectors, actions, and thunks this way.
…r-auth-provider-in-redux-slice
📊 Performance Test ResultsComparing 706793e vs trunk app-size
site-editor
site-startup
Results are median values from multiple test runs. Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff) |
Port removal of noisy Sentry.captureException calls from auth-provider.tsx to auth-slice.ts (handleInvalidToken, authLogout token revoke, authLogout clearAuthenticationToken), keeping the intentional deletion of auth-provider.tsx. Made-with: Cursor
…r-auth-provider-in-redux-slice
|
I think all the comments have now been addressed so I am requesting another review on this. 🙇 |
…r-auth-provider-in-redux-slice
3 participants
Related issues
Fixes https://linear.app/a8c/issue/STU-1379/studio-refactor-authprovider-into-redux-slice
How AI was used in this PR
I used it in the plan mode to plan the refactor, then gave feedback on the plan and used it for implementation, making further manual corrections.
Proposed Changes
This PR refactors
AuthProviderinto Redux slice.Testing Instructions
npm start~/Library/Application Support/Studio/appdata-v1.jsonauthTokenPre-merge Checklist