Блог

Я использую использование состояния redux для отображения экранов для аутентификации. Я использую сохранение пользовательского токена с помощью AsyncStorage, чтобы определить, вошел ли пользователь в систему или нет, а затем я устанавливаю для состояния redux значение true или false.

Вот мой App.js

 // Importing dependencies
import React, { Component, useEffect, useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createDrawerNavigator } from "@react-navigation/drawer";
import {store } from "./components/apiCall"
import * as font from "expo-font";


export default function App() {
  AsyncStorage.getItem("auth").then((val) =>
    updateAuth(val)
  );

  function updateAuth(value) {
        value == "true" ? store.dispatch({ type: "Login" }) : store.dispatch({ type: "Signout" });
  }


    return store.getState().isLoggedIn ? (
      <NavigationContainer>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Chat" component={Chat} />
          <Stack.Screen name="SearchResult" component={SearchResult} />
          <Stack.Screen name="ContactDetails" component={contactDetails} />
        </Stack.Navigator>
      </NavigationContainer>
    ) : (
      <NavigationContainer>
        <Stack.Navigator headerMode="none">
          <Stack.Screen name="Welcome" component={Welcome} />
          <Stack.Screen name="Login"  component={Login}   />
          <Stack.Screen name="Signup" component={Signup} />
      </NavigationContainer>
    );
  
 

}

Я использую состояние, чтобы определить, какие экраны отображать. Когда пользователь нажимает кнопку выхода из системы в моем приложении, я устанавливаю для состояния значение false, но отображаемые экраны не изменяют состояние, пока я не перезагружу приложение

Проблема в том, что вы получаете isLoggedIn из store.getState(). И react фактически обрабатывает это как статическое значение, поэтому он не отслеживает изменения и не запускает повторные запросы.

Вы должны получить isLoggedIn из useSelector hook:

   const { isLoggedIn } = useSelector()
 

вариант 2:

   const isLoggedIn = useSelector(state => state.isLoggedIn)