如何将 Firebase onAuthStateChange 与新的 React Hooks 结合使用？

IT技术 reactjs firebase firebase-authentication react-hooks
2021-04-06 00:26:08

我正在Firebase为我的应用程序验证用户身份。我已经创建了SignIn和SignUp表单，并且可以成功创建新用户并使用存储的用户登录。然而，问题在于在Reload.

我在教程中看到它完成的方式是使用HOC类似以下内容来检查当前用户是否已登录。

const withAuthentication = Component => {
  class WithAuthentication extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        authUser: null,
      };
    }

    componentDidMount() {
      this.listener = this.props.firebase.auth.onAuthStateChanged(
        authUser => {
          authUser
            ? this.setState({ authUser })
            : this.setState({ authUser: null });
        },
      );
    }

    componentWillUnmount() {
      this.listener();
    }

    render() {
    return (
      <AuthUserContext.Provider value={this.state.authUser}>
        <Component {...this.props} />
      </AuthUserContext.Provider>
      );
    }
  }

  return withFirebase(WithAuthentication);
};

export default withAuthentication;

但是，我希望使用 newReact Hooks来消除对HOCs. 我已经withFirebase() HOC通过使用React Context和useContext(FirebaseContext)来访问Firebase. 有没有使用新的方式hooks来模拟这个withAuthentication HOC范围内components，我创造？

我正在使用本教程

https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/

标题为“使用高阶组件进行会话处理”的部分包含此部分。

谢谢！

1个回答

您可以编写一个Custom Hook注册效果并返回身份验证状态的

const useFirebaseAuthentication = (firebase) => {
    const [authUser, setAuthUser] = useState(null);

    useEffect(() =>{
       const unlisten = firebase.auth.onAuthStateChanged(
          authUser => {
            authUser
              ? setAuthUser(authUser)
              : setAuthUser(null);
          },
       );
       return () => {
           unlisten();
       }
    }, []);

    return authUser
}

export default useFirebaseAuthentication;

并且在任何情况下Component您都可以使用它

const MyComponent = (props) => {
   const firebase = useContext(FirebaseContext);
   const authUser = useFirebaseAuthentication(firebase);
   
   return (...)
}

Index.jsx 将在其中包含此代码

ReactDOM.render( 
   <FirebaseProvider> 
      <App /> 
   </FirebaseProvider>, 
   document.getElementById('root'));

这个 Firebase Provider 是这样定义的，

import Firebase from './firebase';

const FirebaseContext = createContext(); 
export const FirebaseProvider = (props) => ( 
   <FirebaseContext.Provider value={new Firebase()}> 
      {props.children} 
   </FirebaseContext.Provider> 
);
@1nullpointer，useContext 是一个开箱即用的 react 提供的钩子，您可以通过导入来使用它 import {useContext} from 'react';
2021-05-31 00:26:08
@1nullpointer 您将FirebaseContext.Consumer在渲染 HOC 的组件中使用 useContext 。
2021-06-13 00:26:08
感谢您的回答 - 它澄清了一些事情。FWIW，我最终对 useEffect 进行了单衬，如下所示：useEffect(() => firebase.auth.onAuthStateChanged(onChange), [])
2021-06-16 00:26:08
您可以创建一个自定义钩子来调用这两个钩子并返回结果，就像您所做的那样 useFirebaseAuthentication
2021-06-18 00:26:08
是的，您只需要 usecontext 并返回 FirebaaseContext.Consumer 的渲染道具在回调中返回的内容
2021-06-22 00:26:08
其它你可能感兴趣的问题
上一篇在 Redux 应用程序中预加载 initialState 的最佳实践是什么？ 下一篇在 FlatList 上使用 React Native 搜索过滤器