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,
};
Простой