Как вернуть компонент только когда firebaseAuthIsReady - PullRequest
Новая
       29

Как вернуть компонент только когда firebaseAuthIsReady

0 голосов
/ 19 апреля 2019

Я решил сделать компонент "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"))

Вопрос в том, как применить store.firebaseAuthIsReady внутрикомпонента reduxStore, потому что я хочу визуализировать компоненты Auth или Layout внутри компонента App в случае, если пользователь вошел в систему или нет.Как это сделать правильно?

...