react-redux-firebase v3.0.0如何判断Auth就绪？替代方案咨询

1. 如何判断firebaseAuthIsReady状态？ #

首先得明确：在v3.0.0版本中，firebaseAuthIsReady已经不再挂载到Redux Store上了，而是挂载到你传入ReactReduxFirebaseProvider的firebase实例上。你之前注释的store.firebaseAuthIsReady.then(...)是v2版本的写法，v3已经做了改动。结合你的配置，正确的获取方式有两种：

方式一：在Provider外部等待Auth就绪后再渲染 #

你可以直接从rrfProps里的firebase实例拿到authIsReady()方法（注意方法名是authIsReady，不是firebaseAuthIsReady），它返回一个Promise，等它resolve后再渲染App：

const rrfProps = { firebase, config: rrfConfig, dispatch: store.dispatch, createFirestoreInstance }

// 等待Auth就绪后再渲染
rrfProps.firebase.authIsReady().then(() => {
  ReactDOM.render( 
    <MuiThemeProvider theme={theme}>
      <Provider store={store}>
        <ReactReduxFirebaseProvider {...rrfProps}>
          <ConnectedRouter history={history}>
            <App />
          </ConnectedRouter>
        </ReactReduxFirebaseProvider>
      </Provider>
    </MuiThemeProvider>, 
    MOUNT_NODE 
  );
})

要确保你的rrfConfig已经设置了attachAuthIsReady: true，你当前的配置是正确的：

const rrfConfig = { userProfile: 'users', attachAuthIsReady: true, firebaseStateName: 'firebase' }

方式二：在组件内部判断Auth状态 #

在组件中可以通过useFirebase hook获取firebase实例，然后调用authIsReady()来判断：

import { useFirebase } from 'react-redux-firebase';

function App() {
  const firebase = useFirebase();
  const [authReady, setAuthReady] = useState(false);

  useEffect(() => {
    firebase.authIsReady().then(() => {
      setAuthReady(true);
    });
  }, [firebase]);

  if (!authReady) {
    return <div>Loading Auth...</div>; // 加载中状态
  }

  return (
    // 你的App内容
  );
}

2. 首次渲染时判断Auth是否就绪的替代方案 #

除了上面的authIsReady()方法，还有两种常用的替代方案：

方案一：监听Redux store中的auth状态 #

react-redux-firebase会将认证状态同步到Redux store的firebase.auth路径下（对应你的firebaseStateName: 'firebase'配置）。你可以在组件中通过useSelector监听这个状态：

import { useSelector } from 'react-redux';

function App() {
  const auth = useSelector(state => state.firebase.auth);
  // auth.isLoaded 会在Auth状态加载完成后变为true
  if (!auth.isLoaded) {
    return <div>Loading Auth...</div>;
  }

  // auth.isEmpty 表示当前是否有用户登录
  if (auth.isEmpty) {
    return <LoginPage />;
  }

  return <MainApp />;
}

这里的auth.isLoaded就是判断Auth是否就绪的关键字段，当它为true时，说明Firebase Auth已经完成初始化，你可以安全地使用用户信息了。

方案二：使用Firebase Auth原生的onAuthStateChanged监听 #

直接使用Firebase Auth的原生方法来监听认证状态变化，不需要依赖redux-firebase：

import { useState, useEffect } from 'react';
import firebase from './firebase'; // 你的firebase实例

function App() {
  const [authReady, setAuthReady] = useState(false);
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      setUser(user);
      setAuthReady(true); // 触发回调说明Auth已经就绪
    });

    return () => unsubscribe(); // 组件卸载时取消监听
  }, []);

  if (!authReady) {
    return <div>Loading Auth...</div>;
  }

  return user ? <MainApp /> : <LoginPage />;
}

关于你遇到的store中不存在firebaseAuthIsReady的问题 #

这是正常现象！因为v3.0.0版本已经移除了将firebaseAuthIsReady挂载到store上的做法，它现在属于firebase实例的方法。另外，注意你的store创建代码：

// 你注释了带rrfConfig的写法
// const store = configureStore(initialState, history, rrfConfig);
const store = configureStore(initialState, history);

如果configureStore是react-redux-firebase提供的创建store的方法，你需要传入rrfConfig才能正确初始化redux-firebase的store切片（包括firebase.auth等状态），否则store里可能不会有firebase这个状态节点，会影响你通过useSelector获取认证状态。所以建议恢复注释的写法，确保store正确集成了redux-firebase配置。

内容的提问来源于stack exchange，提问作者sbtgE