Вынести api-запрос в отдельный компонент в React

Question

Я использую React. Подскажите, как сделать красиво(правильно!). На странице у меня есть две почти одинаковые секции:

И я пытаюсь следовать правилу, разделять контейнеры и компоненты. Есть враппер, в котором происходит один апи запрос на получение картинки(далее она прокидывается пропсом) для определенной секции, рендерится он таким образом:

Получилось так, что этот враппер (почти) одинаков:

Я понимаю, что это можно сделать правильно, но что-то не получается. Меня смущает то, что надо возвращаеть из враппера, где идет апи запрос на получение картинки, два разных компонента. (я смотрел в сторону hoc, но что-то не придумал, как его использовать у себя). Заранее спасибо.

Answer 1

Я сделал все таки через hoc. Вот сам компонент:

function LoadingSnapshotHOC(Component) {
  const NewComponent = (props) => {
    const isMounted = useIsMounted();
    const state = useSelector(({ dateParams }) => {
      const { currentPage } = props;
      return {
        selectedTimeLabel: dateParams?.[currentPage].selectedTimePeriod.label,
        compareTimeLabel: dateParams?.[currentPage].compareTimePeriod.label,
      };
    });

    const [snapshot, setSnapshot] = useState("");

    const updateSnapshot = async (deviceID) => {
      const img = await getSnapshot(deviceID);
      img.onload = () => {
        if (isMounted.current) {
          setSnapshot(img);
        }
      };
    };

    useEffect(() => {
      if (props.deviceID) updateSnapshot(props.deviceID);
    }, [props.deviceID]);

    return (
      <Component
        {...props}
        snapshot={snapshot}
        selectedTimeLabel={state.selectedTimeLabel}
        compareTimeLabel={state.compareTimeLabel}
      />
    );
  };
  return NewComponent;
}
export default LoadingSnapshotHOC;

Далее этим hoc обернул свои компоненты:

function HeatMapSnapshot({...}) {
...
}
export default LoadingSnapshotHOC(HeatMapSnapshot);

и

function TrafficFlowSnapshot({...}) {
...
}
export default LoadingSnapshotHOC(TrafficFlowSnapshot);

И после их 'отрендерил :)' Спасибо всем за внимание!

БЛОГ НА HUSL

Вынести api-запрос в отдельный компонент в React

Ответы (1 шт):