Реагировать на редукционные параметры запроса с компонентами

Question

У меня есть приложение с изоморфным реагированием, использующее RedEx, React-Reuters, React-Router-Redux, я хочу связать свои компоненты с параметрами URL-запроса, а когда параметры запроса изменились, отправить запрос в API, обновить мое состояние и, наконец, получить данные. Я знаю, что с реакцией-маршрутизатора-редукса это автоматически обновляет мое состояние. Также я хочу показать предварительный загрузчик (спиннер) пользователю при получении данных. Каков наилучший способ написать создатель действий для этой проблемы? Спасибо

Answer 1

Я хочу показать предварительный загрузчик (спиннер) пользователю при получении данных

Пройти data опора для вашего компонента. Когда это undefined покажи прядильщик.

const MyComponent = (props) => {
  if (!props.data) return <Spinner />
  ...
}

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

Самое простое решение (которое может стать довольно сложным в зависимости от ваших потребностей) - использовать эту логику в хуках жизненного цикла компонента.

Когда маршрут меняется на реакцию-маршрутизатор, с типичной конфигурацией, будет вызывать рендеринг компонента, если вы ранее были на другом маршруте, и обновлять, если вы ранее были на том же маршруте (то есть на том же пути, но с другими параметрами запроса),

Поэтому для первого случая используйте componentDidMount, для второго - хук жизненного цикла comonentDidUpdate(prevProps, prevState).

Чтобы сопоставить асинхронный вызов API с действиями (редукциями), используйте библиотеку, такую ​​как redux-thunk или, возможно, более приспособленную для этого варианта использования, redux-обещание-связующее ПО. Как их использовать, я расскажу немного подробнее, но у них обоих есть отличная документация.

В конце вы захотите отобразить эти действия в редукторе, поместить данные ответа где-нибудь в вашем дереве состояний, а затем использовать react-redux привязать это место в дереве состояний к data опора на ваш компонент, как я уже упоминал ранее.