Как получить данные для отдельной страницы товара?

Question

[Сергей]

Всем привет.

Устанавливаю модуль react-router-dom.

Создаю компонент странички товара.
Создаю маршрут.

<Route path="/products/:slug" component={Product} />

Соответственно получаю slug через props.match.params.slug

Суть вопроса:
Внутри компанента страницы фетчу данные по slug который получаю из пропсов. Получаю эти данные в стейт. Сам стей получаю через useSelector. И когда пытаюсь отобразить данные, они не успевают под грузится, т.к useSelector срабатывает быстрее чем данные подгружаются с бэка. Подскажите как решить?

Answer 1

[alex4answ]

В стейт добавьте флаг загрузки, при начале устанавливайте например isFetching: true, и добавляйте индикатор загрузки
по окончанию загрузки isFetching: false и отображайте загруженные данные

Comments

[Сергей]

При каждом фетчинге свой индикатор загрузки должен хранится в стейте?

[alex4answ]

Сергей, Не должен, просто это удобно, чтобы рендерить данные только по окончанию запроса

[Сергей]

Ваш вариант не подошел. При первом переходе на одну из страниц товара мы сменим флаг на false, получается что все последующие переходы он будет установлен в false, если мы перейдем на страницу другого товара. И опять же, данные не успевают подгружаться.

[alex4answ]

Сергей, вы в начале fetch устанавливайте в true, по окончанию в false
У вас при переходе на страницу другого товара не фетчятся данные ?

[Сергей]

Сейчас с флагом разобрался, но данные все равно получаю после того как срабатывает useSelector. Т.е сперва undefined потом только подгружаются, но успеваю отхватить ошибку.

Вот как работает action.

export const getSinglePostRequest = (slug: string) => (
  dispatch: Dispatch
): void => {
  dispatch(changeLoadingSinglePost(true));
  const post = new ServicesApi();
  post.getRequestSingleArticle(slug).then((data) => {
    dispatch(addSinglePost(data.article));
    dispatch(changeLoadingSinglePost(false));
  });
};

Вот как я его вызываю внутри компонента.

useEffect(() => {
    dispatch(getSinglePostRequest(slugId));
  }, [dispatch, slugId]);

[Сергей]

Всё разобрался. Благодарю за помощь. Направили в правильное русло :)