Mobx Загрузка обертки React

Question

Вопрос

• Как лучше всего написать общий компонент, который будет использоваться во всех проектах для обработки представления загрузки с использованием Mobx, стек технологий реагирования

• Предположим, мы выполняем вызов API для получения списка продуктов,

  При извлечении apiStatus мы визуализируем loadingview

  Когда apiStatus успешен, мы визуализируем successView, т.е. список продуктов

  Когда происходит сбой apiStatus из-за ошибки сервера или rnet сбоя, мы будем отображать просмотр сбоя с помощью кнопки повтора

Предлагаемое решение 1:

// LoadingWrapperWithFailure.js

@observer
class LoadingWrapperWithFailure extends React.Component {
  render() {
    const { apiStatus, apiError, children, onRetry } = this.props;

    switch (apiStatus) {
      case API_FETCHING:
        // Loading state
        return <LoadingView loaderProps={loaderProps} />;
      case API_SUCCESS:
        // Success state
        return children;
      case API_FAILED:
        // Failed state
        return <FailureView onRetry={onRetry} apiError={apiError} />;
      default:
        return null;
    }
  }
}

// Usage

@observer
class ProductList extends React.Component {
  render() {
    const {
      apiStatus,
      apiError,
      productList,
      onRetryApi
    } = this.props.productStore;
    return (
      <LoadingWrapperWithFailure
        apiStatus={apiStatus}
        apiError={apiError}
        onRetry={onRetryApi}
      >
        <SuccessView>
          {/* Renders productList when apicall is success */}
        </SuccessView>
      </LoadingWrapperWithFailure>
    );
  }
}
> Note: apiStatus, apiError, productList are mobx observable variables

Предлагаемое решение 2:

// LoadingWrapperWithFailure.js

@observer
class LoadingWrapperWithFailure extends React.Component {
  render() {
    const { apiStatus, apiError, renderSuccessUI: RenderSuccessUI, onRetry } = this.props;

    switch (apiStatus) {
      case API_FETCHING:
        // Loading state
        return <LoadingView loaderProps={loaderProps} />;
      case API_SUCCESS:
        // Success state
        return <RenderSuccessUI />;
      case API_FAILED:
        // Failed state
        return <FailureView onRetry={onRetry} apiError={apiError} />;
      default:
        return null;
    }
  }
}

// Usage

@observer
class ProductList extends React.Component {

  renderSuccessUI = observer(() => {
    const { productList } = this.props.productStore
    return (
      <SuccessView>
          {/* Renders productList when apicall is success */}
      </SuccessView>
    )
  })

  render() {
    const {
      apiStatus,
      apiError,
      onRetryApi
    } = this.props.productStore;
    return (
      <LoadingWrapperWithFailure
        apiStatus={apiStatus}
        apiError={apiError}
        onRetry={onRetryApi}
        renderSuccessUI={this.renderSuccessUI}
      />
    );
  }
}

Как лучше всего?

Почему это лучший способ?

Есть ли другие лучшие способы достижения вышеуказанной функциональности?

Пожалуйста, прокомментируйте, если вам нужна дополнительная информация. TIA.