Использование React-Navigation v5 с аутентификацией Redux и Firebase

Question

Я пытаюсь использовать React-Navigation Version 5 (не Ver 4) для переключения с экранов / стека аутентификации на экраны / стек не аутентификации, когда пользователь входит в систему. Простой пример: хорошо продемонстрировано в документации.

Однако в документации не содержится сведений об использовании Redux и аутентификации Google Firebase. После успешного входа в систему появляется следующее предупреждение.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Я думаю, что причиной этого предупреждения является то, что вызов действия Redux (создатель действия) вызывает повторную визуализацию экрана аутентификации, в то время как код навигации уже размонтировал этот экран! Как я могу обновить хранилище Redux после отключения экрана аутентификации?

Код навигации:

...
// If user is logged in -> display the app/main stack
if (props.loggedIn) 
{
    const MyTabs = createBottomTabNavigator();
    return (
        <NavigationContainer>
            <MyTabs.Navigator initialRouteName="UserTypeScreen">
                <MyTabs.Screen name="UserTypeScreen" component={UserTypeScreen}  />
                <MyTabs.Screen name="PermissionsScreen" component={PermissionsScreen} />
            </MyTabs.Navigator>
        </NavigationContainer>
    ); 
}
// If user is NOT logged in -> display the auth stack
else {
    const AuthStack = createStackNavigator();
    return (
        <NavigationContainer>
            <AuthStack.Navigator>
                <AuthStack.Screen name="AuthScreen" component={AuthScreen} />
                <AuthStack.Screen name="AuthLinkScreen" component={AuthLinkScreen} />
            </AuthStack.Navigator>
        </NavigationContainer>
    ); 
}
...

Экран аутентификации:

...
useEffect( () => {
    const unSubscribe = firebase.auth().onAuthStateChanged( (user) => {
        if (user) {
            const idToken = firebase.auth().currentUser.getIdToken(); 
            const credential = firebase.auth.PhoneAuthProvider.credential(idToken); 

            // The following statement causes a warning message, because it causes re-rendering of an unmounted screen
            props.acLoginUserSuccess(user, credential); 
        } 
    }); 

    return () => {
        unSubscribe();
    };
}, []); 
...

Redux Action Creator:

...
export const acLoginUserSuccess = (user, credential) => {
    return {
        type: LOGIN_USER_SUCCESS,
        payload: { user: user, credential: credential }
  };
};
...

Answer 1

Я быстро просмотрел ваш код, но вот что я думаю (может быть ошибочным).

Документы рекомендуют извлекать токен на экране, который смонтирован (пример приложения js) ,

Это не будет проблемой, если ваш прослушиватель firebase.auth () в обработчике useEffect находится в приложении. js.

Я думаю, что предупреждающее сообщение отображается, потому что, когда вы находитесь в MyTabs В этом случае AuthScreen не монтируется.

Перемещение слушателя в приложение. js или на экран, находящийся в одном стеке с ОБА, экран auth и MyTabs решит проблему, которую я считаю.