Правильный способ извлечь обработку сеанса с помощью хуков - PullRequest
Новая
       11

Правильный способ извлечь обработку сеанса с помощью хуков

0 голосов
/ 03 мая 2019

Я читаю «Путь к реакции с помощью Firebase».Я хотел бы извлечь обработку сеанса для аутентифицированного пользователя, используя ловушки: 

const App = (props) => {
  const [authUser, setAuthUser] = useState(null);
  const firebase = useContext(FirebaseContext);
  // cDM
  useEffect(() => {
    const listener = firebase.auth.onAuthStateChanged(authUser => {
      authUser 
        ? setAuthUser(authUser)
        : setAuthUser(null)
    });
    return () => { listener() };
  })
  return (
    <AuthUserContext.Provider value={authUser}>
      <Router>
        <div>
          <Navigation />
          <hr />
          <Route exact path={ROUTES.LANDING} component={LandingPage} />
          <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
          <Route path={ROUTES.SIGN_IN} component={SignInPage} />
          <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
          <Route path={ROUTES.HOME} component={HomePage} />
          <Route path={ROUTES.ACCOUNT} component={AccountPage} />
          <Route path={ROUTES.ADMIN} component={AdminPage} />
        </div>
      </Router>
    </AuthUserContext.Provider>
  );
}

Я извлек в компонент более высокого порядка 

const withAuthentication = Component => (props) => {
  const [authUser, setAuthUser] = useState(null);
  const firebase = useContext(FirebaseContext);
  // cDM
  useEffect(() => {
    const listener = firebase.auth.onAuthStateChanged(authUser => {
      authUser
        ? setAuthUser(authUser)
        : setAuthUser(null)
    });
    return () => { listener() };
  })
  return (
    <AuthUserContext.Provider value={authUser}>
      <Component {...props} />
    </AuthUserContext.Provider>
  );
};

Тогда приложение равно 

const App = () => (
  <Router>
    <div>
      <Navigation />
      <hr />
      <Route exact path={ROUTES.LANDING} component={LandingPage} />
      <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
      <Route path={ROUTES.SIGN_IN} component={SignInPage} />
      <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
      <Route path={ROUTES.HOME} component={HomePage} />
      <Route path={ROUTES.ACCOUNT} component={AccountPage} />
      <Route path={ROUTES.ADMIN} component={AdminPage} />
    </div>
  </Router>
);
export default withAuthentication(App);

с аутентификацией для меня выглядит как обертка.Это правильный способ извлечь с помощью крючков?Это законный вариант использования компонентов более высокого порядка с реакцией с крючками?

...