Как справиться с useEffect только при условии - PullRequest
Новая
       35

Как справиться с useEffect только при условии

0 голосов
/ 20 июня 2020

Я делаю сайт Gastby.

Проблема в том, что Gatsby сбрасывает состояние (размонтирует компонент) при изменении маршрута. Чтобы избежать этого, вы можете сгенерировать оболочку, которая применяется ко всем страницам.

В этой оболочке мне нужно сделать набор запросов api, только если пользователь вошел в систему.

Итак, я пришел с этим, что кажется неправильным 

const Watcher = ({ isLogged }) => {      
  return (
    <>
      {isLogged && <Requests />}
      <Header />
      {children}
    </>
  )
};

, а затем в компоненте запросов 

const Requests = () => {
  useEffect(() => {
    // some requests go here
  }, [someVar1])  
  useEffect(() => {
    // some requests go here
  }, [someVar2])  
  useEffect(() => {
    // some other requests go here
  }, [someVar3])    
  return null
}

Это работает, но выглядит неудобно. Я знаю, что могу передать все фрагменты кода useEffects в Watcher. js, но это тоже не изящно, так как есть несколько useEffects, и нужно было бы применить условие, чтобы увидеть, вошел ли пользователь в каждый из них, плюс , повторно запускать каждый useEffect при изменении состояния входа.

1 Ответ

0 голосов
/ 20 июня 2020

Вы можете объединить все это в один useEffect, как вы просили, при условии.

Конечно, вам нужно добавить другие зависимости, такие как функции, используемые в useEffect

Пример здесь : 

useEffect(() => {
    if(someVar1 === 'somevalue')
        // some requests go here
    if(someVar2 === 'something')
        // some requests go here
    if(someVar3)
        // some other requests go here
},[someVar1, someVar2, someVar3])

Также в качестве альтернативы я предлагаю вам использовать redux-saga и отправлять ему действие только тогда, когда пользователь входит в систему.

Здесь документация

...