Props.navigation was an empty object no matter what I tried...
so Im trying to render a screen change conditionally in app.js
I've tried about a hundred different things and cant figure it out, its been days. please help! There is no error it just doesnt navigate away once a user is signed in. in firebase... it shows they are signed in...
I think i need a subscribe function ... like below but I need help making it work as I am jon snow and this somehow needs to mix with useeffect.
function handleStateChange () {
let previousValue = isLoggedIn
isLoggedIn = store.getState().logIn.isSignedIn;
if(previousValue !== isLoggedIn){
console.log(`${previousValue} ${isLoggedIn}`)
}
}
store.subscribe(handleStateChange);
here is the console.log... undefined false undefined false false true false true
APP.JS....
import { StyleSheet, Text, View,Button } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import WorkoutNavigator from './navigation/WorkoutNavigator';
import Colors from './constants/Colors';
import { createStore , combineReducers, applyMiddleware} from 'redux';
import workOutReducer from './store/Reducers';
import {Provider, useSelector } from 'react-redux';
import ReduxThunk from 'redux-thunk'
import { useEffect, useState } from 'react';
import { initializeApp } from "firebase/app";
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import LoginScreen from './screens/LoginScreen';
import loginReducer from './store/AuthStore/reducer';
const rootReducer = combineReducers({
favorites: workOutReducer,
logIn: loginReducer
});
const store = createStore(rootReducer, applyMiddleware(ReduxThunk));
export default function App(props) {
const [loggedIn, setLoggedIn] = useState(false);
let isLoggedIn = store.getState().logIn.isSignedIn;
useEffect(()=> {
const firebaseConfig = {
},[]);
useEffect(()=>{
setLoggedIn(isLoggedIn)
}, [isLoggedIn])
return (
<Provider store={store}>
{loggedIn ? <WorkoutNavigator /> : <LoginScreen /> }
</Provider>
);
}
...here is my reducer...
import { SIGNIN, SignInACtion } from "./actions"
const initialState = {
isSignedIn: false,
}
const loginReducer = (state = initialState, action) => {
switch(action.type){
case SIGNIN:
return{
isSignedIn: true
}
default: return state;
}
};
export default loginReducer;
here is the action in case you need to see it...
import axios from "axios";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
export const SIGNUP = 'SIGNUP';
export const SIGNIN = 'SIGNIN';
export const SignUpAction = (phone) => {
return async dispatch => {
try{
await axios.post('https://us-central1-one-time-password-d8d7a.cloudfunctions.net/createUser',{
phone
})
await axios.post('https://us-central1-one-time-password-d8d7a.cloudfunctions.net/requestOneTimePass',{
phone
})
}catch(error){console.log(error)};
dispatch({type: SIGNUP, phone: phone})
};
};
export const SignInACtion = (phone, code) => {
return async dispatch => {
try{
let {data}= await axios.post('https://us-central1-one-time-password-d8d7a.cloudfunctions.net/verifyPassword',{
phone,
code
});
firebase.auth().signInWithCustomToken(data.token)
} catch (error){console.log(error)};
dispatch({type: SIGNIN, payload: {
isSignedin: true,
}})
}
}
CodePudding user response:
Firebase'auth provides a simple way to check whether the user authenticated, let's leverage this feature and refactor code as below:
import { StyleSheet, Text, View, Button } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import WorkoutNavigator from "./navigation/WorkoutNavigator";
import Colors from "./constants/Colors";
import { createStore, combineReducers, applyMiddleware } from "redux";
import workOutReducer from "./store/Reducers";
import { Provider, useSelector } from "react-redux";
import ReduxThunk from "redux-thunk";
import { useEffect, useState } from "react";
import { initializeApp } from "firebase/app";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import LoginScreen from "./screens/LoginScreen";
import loginReducer from "./store/AuthStore/reducer";
const rootReducer = combineReducers({
favorites: workOutReducer,
logIn: loginReducer,
});
const store = createStore(rootReducer, applyMiddleware(ReduxThunk));
export default function App(props) {
const [loggedIn, setLoggedIn] = useState(null);
const authenticateUser = () => {
// Detected if user is already logged in
firebase.auth().onAuthStateChanged((user) => {
if (user) {
setLoggedIn(true);
} else {
setLoggedIn(false);
}
});
};
let isLoggedIn = store.getState().logIn.isSignedIn;
useEffect(() => {
if (!loggedIn) {
authenticateUser();
}
}, [loggedIn]);
if (loggedIn === null) return null;
return (
<Provider store={store}>
{loggedIn ? <WorkoutNavigator /> : <LoginScreen />}
</Provider>
);
}