порядок использования эффекта и определение, когда запускать - PullRequest
Новая
       12

порядок использования эффекта и определение, когда запускать

0 голосов
/ 18 апреля 2020

У меня есть основная функция для проверки авторизации в App.js как таковая: 

useEffect(() => {
    if (token) {
      let decodedToken = jwtDecode(token);
      // @ts-ignore
      if (decodedToken.exp * 1000 < Date.now()) {
        dispatch(logoutUser());
      } else {
        axios.defaults.headers.common['Authorization'] = token;
        dispatch(getUser());
      }
    }
  }, [token, dispatch]);

У меня тогда есть useEffects в компонентах, и бывают случаи, когда некоторые useEffect() выполняются первыми, а, следовательно, некоторые dispatch выполнить до получения авторизации.

Как я могу убедиться, что мой App.js — useEffect() get выполнен раньше всего?

1 Ответ

0 голосов
/ 18 апреля 2020

Есть несколько способов сделать это, включая Lazy import et c .., но самый простой способ - создать состояние загрузки, которое соответствует тому, что приложение остальные будет отображать 

const [ initLoading, setInitLoading ] = useState(true)

useEffect(() => {
if (token) {
  let decodedToken = jwtDecode(token);
  // @ts-ignore
  if (decodedToken.exp * 1000 < Date.now()) {
    dispatch(logoutUser());
  } else {
    axios.defaults.headers.common['Authorization'] = token;
    dispatch(getUser());
  }
 setInitLoading(false)
}
}, [token, dispatch]);

return(
  <>
   { initLoading ? <div> loading </div> : <YourApp /> }
  </>
 )
...