Question

我决定将组件“ reduxStore”（在我的项目中是最高级别的）创建，在那里我正在创建一个全局存储并进行一些配置，包括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 ，导致我想在应用程序组件内部呈现Auth或Layout组件，以防用户登录或不登录。如何正确执行此操作？

Answer 1

您应该移动

store.firebaseAuthIsReady.then( () => {

})

包装

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

换句话说-

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

如何仅在firebaseAuthIsReady时返回组件

1 个答案: