Estoy tratando de implementar el flujo de autenticación con Redux en mi aplicación, estoy usando la representación condicional en mi archivo App.js para mostrar la pantalla de la aplicación o la pantalla de autenticación.
Aplicación.js:
<Provider store={store} > <NavigationContainer> {store.getState().auth.initializing && <Initializing />} {store.getState().auth.isLoggedIn && ( <AppNavigator/> )} {!store.getState().auth.initializing && !store.getState().auth.isLoggedIn && ( <AuthenticationNavigator/> )} </NavigationContainer> </Provider> El problema es que no reacciona ante los cambios en el estado, cuando presiono el botón Iniciar sesión en la pantalla de inicio de sesión aunque redux actualice el estado, la representación condicional en App.js no reacciona de todos modos y todavía veo la pantalla de inicio de sesión. Si uso useState con el indicador isUserLoggedIn en App.js y paso la devolución de llamada a los componentes, funciona, pero no con Redux.
Por favor ayuda, ¿qué hago mal?
Redux store.getState es solo una función que devuelve el estado actual, no se suscribe a los cambios en el objeto de la tienda. Esto solo funciona cuando se vuelve a representar el componente que representa sus condicionales.
Lo que puede hacer es usar el método de subscribe para suscribirse a los cambios en la tienda, almacenando en caché el estado localmente:
const [auth, setAuth] = React.useState(() => store.getState().auth); useEffect(() => { const unsubscribe = store.subscribe(() => { setAuth(store.getState().auth); }); return unsubscribe; }, []); ... <NavigationContainer> {auth.initializing && <Initializing />} {auth.isLoggedIn && ( <AppNavigator/> )} {!.auth.initializing && !.auth.isLoggedIn && ( <AuthenticationNavigator/> )} </NavigationContainer> O usted y usa useSelector de react-redux para hacer lo mismo de manera efectiva:
const auth = useSelector(state => state.auth); ... <NavigationContainer> {auth.initializing && <Initializing />} {auth.isLoggedIn && ( <AppNavigator/> )} {!.auth.initializing && !.auth.isLoggedIn && ( <AuthenticationNavigator/> )} </NavigationContainer> Tenga en cuenta que ambas soluciones requieren absolutamente que el Provider de la tienda Redux se mueva más arriba en ReactTree para que este componente pueda consumir el contexto redux y acceder al valor de la tienda.