如何在ReduxStore高阶组件中应用firebaseAuthIsReady控制组件渲染

Let's walk through how to adjust your ReduxStore component to leverage firebaseAuthIsReady, and then update your App component to render the right UI based on the user's auth state.

Step 1: Update the ReduxStore Component to Wait for Auth Readiness #

Right now, your component renders the app immediately, but we need to wait until Firebase's auth state is fully initialized to avoid state flickers or incorrect renders. We'll use React's useState and useEffect hooks to handle this promise:

import React, { useState, useEffect } from 'react'
import { createStore, applyMiddleware, compose } from "redux";
import { Provider } from "react-redux"
import thunk from 'redux-thunk'
// Firebase imports
import { reduxFirestore, getFirestore } from 'redux-firestore'
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase'
import fbConfig from '../config/fbConfig'
// Root Reducer
import rootReducer from './reducers/rootReducer'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  rootReducer,
  composeEnhancers(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
    reduxFirestore(fbConfig),
    reactReduxFirebase(fbConfig, { attachAuthIsReady: true })
  )
);

const ReduxStore = props => {
  const [authReady, setAuthReady] = useState(false);

  useEffect(() => {
    // Wait for Firebase auth to finish initializing
    store.firebaseAuthIsReady.then(() => {
      setAuthReady(true);
    });
  }, []);

  // Show a loading state while we wait for auth to be ready
  if (!authReady) {
    return <div>Loading app...</div>; // Replace with your custom loading component
  }

  return (
    <Provider store={store}>
      {props.children}
    </Provider>
  )
}

export default ReduxStore

Step 2: Ensure Your Root Reducer Includes Firebase/Firestore Reducers #

Make sure your rootReducer is combining the required reducers from react-redux-firebase and redux-firestore—these handle syncing auth and Firestore state to your Redux store:

import { combineReducers } from 'redux';
import { firebaseReducer } from 'react-redux-firebase';
import { firestoreReducer } from 'redux-firestore';
// Import your custom reducers here
// import exampleReducer from './exampleReducer';

const rootReducer = combineReducers({
  firebase: firebaseReducer, // Syncs auth state
  firestore: firestoreReducer, // Syncs Firestore data
  // Add your custom reducers below
  // example: exampleReducer
});

export default rootReducer;

Step 3: Update the App Component to Render Conditionally #

Now you can connect your App component to the Redux store to access the auth state, and render either your Auth or Layout component based on whether the user is logged in:

import React from 'react';
import { connect } from 'react-redux';
import Auth from './path/to/Auth'; // Your auth component
import Layout from './path/to/Layout'; // Your logged-in layout

const App = ({ auth }) => {
  // Check if the user is logged in (auth.uid exists when authenticated)
  return auth.uid ? <Layout /> : <Auth />;
};

// Map Redux state to component props
const mapStateToProps = (state) => ({
  auth: state.firebase.auth
});

export default connect(mapStateToProps)(App);

How This Works #

• store.firebaseAuthIsReady is a promise that resolves once Firebase has finished initializing the auth state. We wait for this in the ReduxStore component to ensure we don't render the app until we have the correct auth status.
• The firebaseReducer syncs Firebase's auth state to your Redux store, so state.firebase.auth will contain the current user's data (including uid when logged in).
• In the App component, we use that auth prop to decide whether to show the logged-in Layout or the auth flow.

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