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

Question

MysticNova

react

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

Каким образом можно добавить блок <div className={loader}>...</div> в компонент <Layout />, используя отдельный редьюсер в сторе и делая два вызова dispatch в кастомном хуке выборки данных? Можно ли передать dispatch в loader роутера? 

Вот пример кода, где все это может применяться:

function checkAccess() {
 ...
}

return [
    {
      element: <Layout />,
      errorElement: <Error />,
      loader: checkAccess,
      children: [...]
    }
]

4 ноября 2023 г. 9:19

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для обработки начала и окончания работы глобального компонента загрузки можно использовать lifecycle-методы React компонентов, такие как componentDidMount и componentWillUnmount. В методе componentDidMount можно установить состояние загрузки на true, а в componentWillUnmount - на false.

Чтобы добавить блок <div className={loader}>...</div> в компонент <Layout />, можно использовать условный рендеринг на основе состояния загрузки. В компоненте Layout нужно проверить состояние загрузки и в зависимости от него, либо рендерить контент, либо блок с загрузкой. Примерно так:

```jsx
import { useSelector } from 'react-redux';

function Layout() {
  const isLoading = useSelector(state => state.loader.isLoading);

  return (
    <div>
      {isLoading ? <div className={loader}>...</div> : null}
      {/* остальной контент */}
    </div>
  );
}
```

Чтобы передать dispatch в loader роутера, можно воспользоваться контекстом. Если используется react-router, можно воспользоваться withRouter HOC для доступа к router из props. Примерно так:

```jsx
import { withRouter } from 'react-router-dom';

function Layout({ history }) {
  // ...
  const isLoading = useSelector(state => state.loader.isLoading);

  useEffect(() => {
    const unsubscribe = history.listen(() => {
      // вызов dispatch для начала загрузки
    });

    return () => {
      unsubscribe();
      // вызов dispatch для окончания загрузки
    };
  }, [history]);

  return (
    // ...
  );
}

export default withRouter(Layout);

```

Надеюсь, это поможет!