Tengo este componente NotificationToast que gestiona las notificaciones.
Necesito que siempre se represente cuando el usuario esté autenticado .

Así que esto es lo que hice:

 class App extends Component { render() { const state = store.getState(); const { isAuthenticated } = state.auth; return ( <Provider store={store}> <BrowserRouter basename="/"> <Switch> <PublicRoute path="/register-page" component={RegisterPage} /> <PrivateRoute path="/profile-page" component={ProfilePage} /> <Redirect to="/home" /> </Switch> {isAuthenticated && ( <div> <NotificationToast /> </div> )} </BrowserRouter> </Provider> ); } } export default App;

El problema es que esto no funciona en el siguiente escenario :

1. El usuario no ha iniciado sesión.
2. Entonces él no está autenticado. Entonces state.auth.isAuthenticated es false
3. Cuando inicia sesión, state.auth.isAuthenticated se establece en true .
4. Pero el problema es que la App no detecta este cambio y, por lo tanto, no se vuelve a procesar.
5. Y así, NotificationToast no se procesa.
6. Y entonces el sistema de notificación no funciona.

Esto funciona cuando el usuario actualiza la página después de iniciar sesión, porque state.auth.isAuthenticated es true desde el principio.

Esto se debe a este código:

 if (localStorage.jwtToken) { // Set auth token header auth setAuthToken(localStorage.jwtToken); // Decode token and get user info and expiration const decoded = jwt_decode(localStorage.jwtToken); // Set User and is Authenticated store.dispatch(setCurrentUser(decoded)); // Now if you reload a page, if the user has already logged-in you will still have his info in he state store.dispatch(clearCurrentProfile()); // Check for expired token const currentTime = Date.now() / 1000; if (decoded.exp < currentTime) { store.dispatch(logoutUser()); store.dispatch(clearCurrentProfile()); // Redirect to login window.location.href = "/login"; } }

Comprueba si el usuario ya inició sesión y, si lo hizo, establece state.auth.isAuthenticated en true .

¿Alguna sugerencia?