如何使用 v3.0.0 找到 firebaseAuthIsReady？

Posted 2023-02-22

【中文标题】如何使用 v3.0.0 找到 firebaseAuthIsReady？

【英文标题】：How can I find if firebaseAuthIsReady with v3.0.0?

【发布时间】：2019-07-03 11:38:11

【问题描述】：

react-redux-firebase 和 v3.0.0 中的替代方法是什么来确定身份验证是否已准备好 - 第一次渲染？这种情况下的问题是商店不包含 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
  );

【问题讨论】：

新版本移除了承诺附件

在 v3.0.0 中还有其他方法可以实现这一点吗？ @sbtgE

mapStateToProps auth from firebase - state.firebase.auth，然后你可以使用 rrf 中的 isLoaded(this.props.auth) 函数

【参考方案1】：

 //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 文档：Wait For Auth To Load on http://react-redux-firebase.com/

【参考方案2】：

在他们的文档中提到了新版本的实现方式： 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 函数一样工作。

【讨论】：

当答案通过审核队列时，将某些内容标记为非常低质量（应删除）的选项之一是当答案仅包含一个链接并且将来对某人无用时，如果该链接将断开。解决此问题的方法是确保答案是自包含的，并且仅使用链接来提供附加信息。

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

明白了，改变了！

【参考方案3】：

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

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