Otp 验证仅在用户第一次安装应用程序时与 saga 反应本机

Question

我在显示启动画面后检查用户是否有效。所以在我的启动画面中，我检查了来自 redux saga 的数据，如下所示


  Hide_Splash_Screen=()=>{
    this.setState({
      isVisible:false   
    })
    if(this.props.phoneNumberData !== null )
    {
      this.props.navigation.navigate('HomeScreen')
    }

    else
    {
      this.props.navigation.navigate('PhoneVerification')
    }
  } 
  
  
  
  componentDidMount(){
    setTimeout(()=>{  
      this.Hide_Splash_Screen();  
    }, 2000);
   
    this.props.fetchSavePhoneNumber()

  }

因此，如果用户是第一次安装该应用程序，则会提示 PhoneVerification Screen，而不是直接进入 HomeScreen

所以这是我使用 otp 检查 phone 验证然后作为新用户存储在 saga

中的逻辑

handleSendCode=()=>{
        var phoneno = '+91'+this.state.phone
        firebase
            .auth()
            .signInWithPhoneNumber(phoneno)
            .then(confirmResult => {
                this.setState({ confirmResult })
            })
            .catch(error => {
                alert(error.message)
                console.log(error)
            })
        this.setState({showotpScreen:true})    
    }
 checkOtp=()=>{
        this.state.confirmResult
            .confirm(this.state.otp)
            .then(user => {
                this.props.NewPhoneNumber(user)
                this.props.navigation.navigate('HomeScreen')
            })
            .catch(error => {
                alert(error.message)
                console.log(error)
            })
          
    }

对于 ReduxSaga 的实现，我采取了两种不同的操作和一种 reducer，就像这样

phone动作

export const fetchSavePhoneNumber = () => ({
    type: 'FETCH_SAVE_PHONENUMBER',
});

export const NewPhoneNumber = (data) => ({
    type:'SAVE_NEW_PHONENUMBER',
    payload: data
});

phone减速器

const initialState = {
    phoneNumberData: null,
};

export default (state = initialState, { type, payload }) => {
    switch(type){
        case 'SAVE_NEW_PHONENUMBER':
            return{
                ...state,
                phoneNumberData: payload,
            };
        case 'IS_VALIDATING':
            return{
                ...state,
            };  
        default:
            return state;         
    };
}

我的 Two Saga 看起来像这样

新电话号码


import { call, put, select, takeLatest } from 'redux-saga/effects';
import AsyncStorage from '@react-native-community/async-storage';

const phoneno = state => state.phone.phoneNumberData ;


function* PhoneVerifyTask(action){
    const phoneNumberData = yield select(phoneno);
    
    try{
        
        yield call(AsyncStorage.setItem,'phoneVerify',JSON.stringify(phoneNumberData));
        yield put({ type: 'SAVE_NEW_PHONENUMBER', payload: phoneNumberData });
        
    }
    catch(error){
        console.log(error)
    }

}

function* NewPhoneNumber(){
    yield takeLatest('SAVE_NEW_PHONENUMBER',PhoneVerifyTask)
} 

export default NewPhoneNumber;

FetchSavePhoneNumber

import { call, put, takeLatest } from 'redux-saga/effects';
import AsyncStorage from '@react-native-community/async-storage';

function* fetchVerifyPhoneNumber(action){
    yield put({
        type: 'IS_VALIDATING',
      });
    try
    {
        const response = yield call(AsyncStorage.getItem,'phoneVerify')
        yield put({
            type: 'SAVE_NEW_PHONENUMBER',
            payload: JSON.parse(response) || null
        });
        
    }
    catch(error){
        console.log(e);
        yield put({
            type: 'SAVE_NEW_PHONENUMBER',
            payload: {
              phoneNumberData: null
            },
          });
        
    }
}

function* FetchSavePhoneNumber(){
    yield takeLatest('FETCH_SAVE_PHONENUMBER',fetchVerifyPhoneNumber)
}

export default FetchSavePhoneNumber;

但是在成功存储 newPhoneNumberdata 和 fetchingExisting PhoneNumberdata 之后，我的整个 redux 就像一个无限循环

Answer 1

这可能是因为您调用 FETCH_... 的组件是 re-rendered 并且调用了另一个时间。

我建议在您的应用程序中调用更高级别的操作（也许在您的 App.js 构造函数中）。您还可以直接在生成器中加载应用程序时触发传奇。

Otp 验证仅在用户第一次安装应用程序时与 saga 反应本机

Otp Verification only the time when user install app first time in react native with saga

reactjs

react-native

redux-saga