CODEWITHSUNDEEP
react-nativeredux
DarkPoison
DarkPoison

Reputation: 131

How to get react native to rerender a page when redux state is changed

I am using using redux state to render screens for authentication. I use the user token save using AsyncStorage to ditermine whether the user is logged in or not and then I set the redux state to true or false.

Here is my 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>
    );

}

I am use the state to ditermine what screens to render. When the user presses signout in my app I set the state to false but the screens that are being rendered do not change the state unless I reload the App

Upvotes: 1

Views: 204

Answers (1)

Vitali T
Vitali T

Reputation: 349

The problem is that you are getting isLoggedIn from store.getState(). And react actually treating this as a static value, so it not watching for changes and does not trigger rerenders.

You should get is isLoggedIn from useSelector hook:

  const { isLoggedIn } = useSelector()

option 2:

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

Upvotes: 2

Related Questions