用戶登錄后，我如何才能從登錄螢屏導航到應用程式......本機反應

無論我嘗試什么，Props.navigation 都是一個空物件......

所以我試圖在 app.js 中有條件地呈現螢屏變化

我已經嘗試了大約一百種不同的東西并且無法弄清楚，已經好幾天了。請幫忙！沒有錯誤，一旦用戶登錄，它就不會離開。在firebase中......它表明他們已經登錄......

我想我需要一個訂閱功能......如下所示，但我需要幫助使它作業，因為我是喬恩雪，這需要與 useeffect 混合。

function handleStateChange () {
    let previousValue = isLoggedIn
    isLoggedIn = store.getState().logIn.isSignedIn;

    if(previousValue !== isLoggedIn){
     console.log(`${previousValue} ${isLoggedIn}`)
    }
}

 store.subscribe(handleStateChange);

這是console.log... undefined false undefined false false true false true

應用程式.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>
      
    
  );
}

...這是我的減速機...

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;

這是您需要查看的操作...

 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,
                  
             
            
              
        }})

         }
     
    }

uj5u.com熱心網友回復：

Firebase'auth 提供了一種簡單的方法來檢查用戶是否經過身份驗證，讓我們利用此功能并重構代碼如下：

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>
  );
}

標籤：反应 反应式 验证 firebase 身份验证 订阅

上一篇：使用JWT保護RestAPI

下一篇：如何使用tkinter中的按鈕更改沒有全域關鍵字的全域變數？