I decided to make component "reduxStore" (it is toplevel hoc in my project), where i'm creating a global store and make some config, including firebase middleware.
This is the code of component:
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
As you can see, reduxStore wrapping my app in index.js:
const app = (
<ReduxStore>
<Router>
<App />
</Router>
</ReduxStore>
);
ReactDOM.render(app, document.getElementById("cardbox"))
The question is, how to apply store.firebaseAuthIsReady inside of reduxStore component, cause i want to render Auth or Layout components inside of App component in case user logged in or not. How to do this correctly?
