@kirillleogky

Как следить за состоянием булева при перезагрузке?

isAuth - это булево которое говорит авторизировался ли пользователь
dispatch(actions.setIsAuth(true)) - устанавливает ему значение true
функция отслеживания авторизации firebase:
auth.onAuthStateChanged((user) => {
    if (user && !isAuth) {
      dispatch(actions.setIsAuth(true));
    }
  });



Далее в коде я смотрю на isAuth и решаю что отрисовывать:
<main>
          {isAuth ? (
            <Main
              onAddTodo={addTodo}
              onDragEnd={(result) =>
                onDragEnd(result, filterTodos, state, dispatch)
              }
              onDeleteTodo={deleteTodo}
              onDoneTodo={doneTodo}
              todos={filterTodos}
            />
          ) : (
            <Auth />
          )}
        </main>



Подскажите как мне правильно делать так чтобы при перезагрузке страницы компонент Main сразу отрисовывался?
Как правильно?
Без фриза такого: https://youtu.be/5vxYhGFqx0s


Сам код:
import React, { Fragment } from "react";
import PropTypes from "prop-types";
import { useSelector, useDispatch } from "react-redux";
import actions from "./actions";
import "./App.scss";
import Head from "./components/head";
import Main from "./components/main";
import Auth from "./components/main/auth";
import onDragEnd from "./utils/onDragEnd";
import onFilterTodos from "./utils/filterTodos";
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

export default function App() {
  const state = useSelector((state) => state);
  const isShowTips = useSelector((state) => state.isShowTips.data);
  const todoList = useSelector((state) => state.todoList.data);
  const inputActiveClass = useSelector((state) => state.inputActiveClass.data);
  const isAuth = useSelector((state) => state.isAuth.data);
  const dispatch = useDispatch();

  // Initial Firebase
  const firebaseConfig = {
    apiKey: "????",
    authDomain: "?????",
    databaseURL: "https://to-do-list-c0409.firebaseio.com",
    projectId: "to-do-list-c0409",
    storageBucket: "to-do-list-c0409.appspot.com",
    messagingSenderId: "219696490030",
    appId: "?????",
  };
  !firebase.apps.length
    ? firebase.initializeApp(firebaseConfig)
    : firebase.app();

  // Make Auth And Firestore References
  const auth = firebase.auth();
  const db = firebase.firestore();

  // Create Current User Id
  let currentUser;

  auth.onAuthStateChanged((user) => {
    if (user && !isAuth) {
      dispatch(actions.setIsAuth(true));
    }
    if (user) {
      currentUser = user.uid;
    }
  });

  return (
    <Fragment>
      <div
        id={`${isShowTips ? "focus_on_tips" : ""}`}
        className="todo_block"
        onClick={checkInput}
      >
        <header>
          <Head />
        </header>
        <main>
          {isAuth ? (
            <Main
              onAddTodo={addTodo}
              onDragEnd={(result) =>
                onDragEnd(result, filterTodos, state, dispatch)
              }
              onDeleteTodo={deleteTodo}
              onDoneTodo={doneTodo}
              todos={filterTodos}
            />
          ) : (
            <Auth />
          )}
        </main>
      </div>
    </Fragment>
  );
}

App.propTypes = {
  isShowTips: PropTypes.bool,
  todoList: PropTypes.array,
  inputActiveClass: PropTypes.string,
};
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ответы на вопрос 1
GreyCrew
@GreyCrew
Full-stack developer
firebase это серверное хранилище данных, поэтому вы должны какую то инфу хранить на клиенте.
К примеру в куки засуньте apiKey, если он есть, то isAuth будет true.
Но при каждом запросе на сервер, делайте проверку на валидность apiKey, если apiKey не валидный, то isAuth делайте false.
Также при разлогине удаляйте apiKey, и тогда у вас пользователь увидит Auth
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы