CODEWITHSUNDEEP
reactjsfirebasereact-redux-firebase
sbtgE
sbtgE

Reputation: 65

How can I find if firebaseAuthIsReady with v3.0.0?

What is the alternative in react-redux-firebase with v3.0.0 to find out if auth is ready - to render for the first time? Problem in this case is that store doesn't contain firebaseAuthIsReady or am I missing something?

//ReactReduxFirebaseProvider v3.0.0
const rrfConfig = { 
  userProfile: 'users',
  attachAuthIsReady: true,
  firebaseStateName: 'firebase'
}

//const store = configureStore(initialState, history, rrfConfig);
const store = configureStore(initialState, history);


const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance
}

const MOUNT_NODE = document.getElementById('root')
//store.firebaseAuthIsReady.then(() => {
  ReactDOM.render(
    <MuiThemeProvider theme={theme}>
      <Provider store={store}>
        <ReactReduxFirebaseProvider {...rrfProps}>
          <ConnectedRouter history={history}>
            <App />
          </ConnectedRouter>
        </ReactReduxFirebaseProvider>
      </Provider>
    </MuiThemeProvider>,
    MOUNT_NODE
  );

Upvotes: 3

Views: 2260

Answers (3)

AWIXOR
AWIXOR

Reputation: 542

The way of implementing that is the new versions is mentioned here in their docs: http://react-redux-firebase.com/docs/recipes/auth.html#wait-for-auth-to-load

  1. import the isLoaded from "react-redux-firebase" like this: 
    import { isLoaded } from "react-redux-firebase"
  2. create a function that returns a loader spin or something while the data is not loaded yet: 
    function AuthIsLoaded({ children }) {  
const auth = useSelector((state) => state.firebase.auth);   if
(!isLoaded(auth))
    return (
      <Wrapper>
        <Loader />
      </Wrapper>
    );   
return children; }
  3. wrap your app inside the AuthIsLoaded component like this: 
    <AuthIsLoaded>
    <App />
</AuthIsLoaded>

and this will work just like the firebaseAuthReady function.

Upvotes: 0

John Dereje
John Dereje

Reputation: 69

 //For React Redux Firebase v3.0.*      
        import React from 'react';
        import ReactDOM from 'react-dom';
        import App from './App';
        import { createStore, applyMiddleware, compose } from 'redux';
        import { Provider, useSelector } from 'react-redux';
        import thunk from 'redux-thunk';
        import rootReducer from './myproject/rootReducer';
        import { createFirestoreInstance } from 'redux-firestore';
        import { ReactReduxFirebaseProvider, isLoaded } from 'react-redux-firebase';
        import firebase from './myproject/config/fbConfig';       

           const rrfConfig = {}

           const store = createStore(
               rootReducer, 
                compose(
                 applyMiddleware(thunk)   // if you are using thunk 
                  )
            )

            const rrfProps = {
                  firebase,
                  config: rrfConfig,
                  dispatch: store.dispatch,
                  createFirestoreInstance
               }

           function AuthIsLoaded({ children }) {
                    const auth = useSelector(state => state.firebase.auth)
                    if (!isLoaded(auth)) return <div>Loading Screen...</div>;
                        return children
                }

    ReactDOM.render(<Provider store={store}><ReactReduxFirebaseProvider {...rrfProps}>
                     <AuthIsLoaded><App /> </AuthIsLoaded></ReactReduxFirebaseProvider>
            </Provider>, document.getElementById('root'));

See react-redux-firebase Doc: Wait For Auth To Load on http://react-redux-firebase.com/

Upvotes: 5

user12377247
user12377247

Reputation: 1

import { isLoaded, isEmpty } from 'react-redux-firebase';

See: http://react-redux-firebase.com/docs/recipes/auth.html

Upvotes: -1

Related Questions