3

使用 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
  );
4

3 回答 3

5
 //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/

于 2019-12-16T20:01:03.510 回答
0

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

  1. 从“react-redux-firebase”导入 isLoaded,如下所示:
    import { isLoaded } from "react-redux-firebase"
    
  2. 创建一个函数,该函数在尚未加载数据时返回加载器旋转或其他内容:
    function AuthIsLoaded({ children }) {  
    const auth = useSelector((state) => state.firebase.auth);   if
    (!isLoaded(auth))
        return (
          <Wrapper>
            <Loader />
          </Wrapper>
        );   
    return children; } 
    
  3. 将您的应用程序包装在 AuthIsLoaded 组件中,如下所示:
    <AuthIsLoaded>
        <App />
    </AuthIsLoaded>
    

这将像 firebaseAuthReady 函数一样工作。

于 2020-06-23T14:26:19.490 回答
-1
import { isLoaded, isEmpty } from 'react-redux-firebase';

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

于 2019-11-15T08:08:51.070 回答