React Redux state shows stale user data after profile update — backend not refetched
Problem
After a successful PUT /user profile update, the Redux store still shows the old data. The component builds the new state from the form values instead of re-fetching from the API. When the user navigates away and returns, stale data reappears. The pattern of dispatching a local state update instead of fetching fresh server state is the root cause.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Dispatch a fetchUser() thunk after every profile update instead of building state from form
Building Redux state from form values after a mutation creates a local approximation of server state. Any field not in the form is lost, and any server-side transformation is missed. The correct pattern is to always fetch from the server after mutations.
Trust Score
7 verifications
- 1
Create a fetchUser thunk in your auth slice
Add a thunk that fetches the current user from the API:
typescriptexport const fetchUser = createAsyncThunk('auth/fetchUser', async () => { const response = await api.get('/user/me') return response.data }) // In your slice extraReducers: .addCase(fetchUser.fulfilled, (state, action) => { state.user = action.payload }) - 2
Call fetchUser after successful mutation
In your profile update component:
typescriptconst handleSave = async () => { await dispatch(updateProfile(formData)).unwrap() await dispatch(fetchUser()).unwrap() // re-sync from server }
Validation
Update profile and navigate away. Return to the profile page — all fields should reflect the server state, not the local form state.
Verification Summary
Sign in to verify this fix
Environment
- Product
- React + Redux Toolkit
- Environment
- production
Submitted by
Alex Chen
2450 rep