reactjs - 如何仅在 firebaseAuthIsReady 时返回组件

Question

我决定制作组件“reduxStore”（它是我项目中的顶级 hoc），我正在创建一个全局存储并进行一些配置，包括 firebase 中间件。

这是组件的代码：

import React from 'react'
import { createStore, applyMiddleware, compose } from "redux";
import { Provider } from "react-redux"
import thunk from 'redux-thunk'

//Firebase
import {reduxFirestore, getFirestore} from 'redux-firestore'
import {reactReduxFirebase, getFirebase} from 'react-redux-firebase'
import fbConfig from '../config/fbConfig'

//RootReducer
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 => {
  return (
    <Provider store={store}>
      {props.children}
    </Provider>
  )
}

store.firebaseAuthIsRady.then( () => {

})

export default reduxStore

如您所见，reduxStore 将我的应用程序包装在 index.js 中：

const app = (
  <ReduxStore>
    <Router>
      <App />
    </Router>
  </ReduxStore>
);

ReactDOM.render(app, document.getElementById("cardbox"))

问题是，如何在 reduxStore 组件内应用store.firebaseAuthIsReady，因为如果用户登录或未登录，我想在 App 组件内渲染 Auth 或 Layout 组件。如何正确执行此操作？

Answer 1

你应该搬家

store.firebaseAuthIsReady.then( () => {

})

包裹

ReactDOM.render(app, document.getElementById("cardbox"))

换句话说 -

store.firebaseAuthIsReady.then( () => {
    ReactDOM.render(app, document.getElementById("cardbox"))
})