reactjs - 如何使用 v3.0.0 找到 firebaseAuthIsReady？

Question

使用 v3.0.0 的 react-redux-firebase 中的替代方法是什么来确定身份验证是否已准备好 - 首次渲染？在这种情况下，问题是商店不包含 firebaseAuthIsReady 还是我遗漏了什么？

//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
  );

score 5 · Accepted Answer

 //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'));

请参阅 react-redux-firebase 文档：等待身份验证加载 http://react-redux-firebase.com/

score 0 · Accepted Answer

在他们的文档中提到了新版本的实现方式： http ://react-redux-firebase.com/docs/recipes/auth.html#wait-for-auth-to-load

从“react-redux-firebase”导入 isLoaded，如下所示：
```
import { isLoaded } from "react-redux-firebase"
```

创建一个函数，该函数在尚未加载数据时返回加载器旋转或其他内容：

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

将您的应用程序包装在 AuthIsLoaded 组件中，如下所示：
```
<AuthIsLoaded>
    <App />
</AuthIsLoaded>
```

这将像 firebaseAuthReady 函数一样工作。

score -1 · Accepted Answer

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

请参阅：http ://react-redux-firebase.com/docs/recipes/auth.html

reactjs - 如何使用 v3.0.0 找到 firebaseAuthIsReady？

3 回答 3

Related

Reference