React Native Authentication Navigation - REDUX

Question

I can't change the value of the state of the store using the reducer. I'm making an app which has a login-functionality. When a person opens up the app, depending on the fact if he is logged in or not, it should show the right screen. The problem I'm having right now is it doesn't seem to be able to change the store state out of another screen. Anybody who can help me?

import {createStore} from "redux";

const initialState = {
    value: false
}
function reducer(state= initialState, action) {
    const newState = {...state};
    if(action.type === 'login') {
        console.log("hahaha you logged in");
        newState.value = true;
    }
    else if(action.type ==='logout') {
        console.log("hahaha you logged out")
        newState.value = false;
    }
    return newState;
}

const store = createStore(reducer);



export default store;

This is the store, this should change the value accordingly.

When the login button is pressed on loginscreen it should call the reducer function.

import React, { useRef, useState } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, Image, Dimensions, AsyncStorage } from 'react-native';
import axios from "axios";
import store from "../routes/store"

function LoginScreen({navigation}, props) {


    const win = Dimensions.get('window');

    const [email,setEmail] = useState('');
    const [password, setPassword] = useState('');
    const { auth, setAuth } = useAuth();
    const [errMsg, setErrMsg] = useState('');

    const logInCheck = async (e) => {
            console.log("Ingelogd");
            store.dispatch({type: 'login'})
    }

    return(
        <Root>
            <View style={styles.container}>
                <TouchableOpacity style={styles.loginBtn} onPress{logInCheck}>
                    <Text style={styles.loginText}>LOGIN</Text>
                </TouchableOpacity>
            </View>
        </Root>
    )
}

This is the code which should render the right screen depending on the fact if the person is logged in!

import React, { useState, useReducer } from "react";
import { createStore } from 'redux';
import { View,Text } from "react-native";
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from "../screens/LoginScreen";
import * as SecureStore from 'expo-secure-store';
import axios from "axios";
import Tabs from "./Tabs";
import store from "./store";
import ForgotPasswordScreen from "../screens/ForgotPassword";

const AuthStack = () => {

    function rendFunc() {
      console.log(store.getState());
      return(
          <AuthStack.Navigator>
            {!store.getState()? (
                <AuthStack.Screen name="Tabs" component={Tabs} options={{headerShown : false}}/>
            ) : (
                <>
                  <AuthStack.Screen
                      name = "LoginScreen"
                      component={LoginScreen}
                  />
                  <AuthStack.Screen
                      name = "ForgotPassword"
                      component={ForgotPasswordScreen},
                  />
                </>
            )
            }
          </AuthStack.Navigator>
      );
    }

    return (

      rendFunc()
    );

  store.subscribe(rendFunc);
  };


export default AuthStack;

Answer 1

The problem with your code is in react re-render rather than the redux store not updating. The store is updating properly but your react component is not aware of any change that has occurred in the store so no re-render is happening.

Firstly you need to add subscriptions to the redux store listener in useEffect i.e. when the component is mounted and later unsubscribe to prevent memory leakages. The redux subscribe function takes in a function to handle whenever state change has occurred in the redux store.

In this function, you can create a state using useState to create a re-render of the component.

use the below code in the authstack and it should work fine. if any more queries you can contact me @ [email protected]

import React, { useState, useReducer, useEffect } from "react";
import { createStore } from 'redux';
import { View,Text } from "react-native";
import { createNativeStackNavigator } from '@react-navigation/native- 
stack';
import LoginScreen from "../screens/LoginScreen";
import * as SecureStore from 'expo-secure-store';
import axios from "axios";
import Tabs from "./Tabs";
import store from "./store";
import ForgotPasswordScreen from "../screens/ForgotPassword";

const AuthStack = () => {
const [loginState, setLoginState] = useState(false)
    const handleReduxStateChange = () =>{
         setLoginState(store.getState().value)
    }
useEffect(()=>{
    const unsubscribe = store.subscribe(handleReduxStateChange);
    return unsubscribe()
    },[])
    function rendFunc() {
      console.log(store.getState());
      return(
          <AuthStack.Navigator>
            {!store.getState().value? (
                <AuthStack.Screen name="Tabs" component={Tabs} options= 
 {{headerShown : false}}/>
            ) : (
                <>
                  <AuthStack.Screen
                      name = "LoginScreen"
                      component={LoginScreen}
                  />
                  <AuthStack.Screen
                      name = "ForgotPassword"
                      component={ForgotPasswordScreen},
                  />
                </>
            )
            }
          </AuthStack.Navigator>
      );
    }

    return (

      rendFunc()
    );
 
  };


export default AuthStack;