Как я могу использовать Firebase onAuthStateChange с новыми React Hooks? - PullRequest
Новая
       17

Как я могу использовать Firebase onAuthStateChange с новыми React Hooks?

4 голосов
/ 27 марта 2019

Я использую 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;

Однако я собираюсь использовать новый React Hooks, чтобы устранить необходимость в HOCs. Я уже удалил withFirebase() HOC, используя React Context и useContext(FirebaseContext) для доступа к одному экземпляру Firebase. Есть ли способ использовать новый hooks для имитации этого withAuthentication HOC внутри components, который я создаю?

Я использую этот урок

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

Раздел «Обработка сеансов с компонентами высшего порядка» содержит эту часть.

Спасибо!

1 Ответ

3 голосов
/ 27 марта 2019

Вы можете написать 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 определен так: 

import Firebase from './firebase';

const FirebaseContext = createContext(); 
export const FirebaseProvider = (props) => ( 
   <FirebaseContext.Provider value={new Firebase()}> 
      {props.children} 
   </FirebaseContext.Provider> 
);
...