Почему предпочтительнее React Query перед Redux?

Я всегда считал, что должен быть лучший способ сделать то же самое с React JS. Хотя я использовал Redux для обработки выборки данных в проектах.

Почему React Query?

В redux каждая операция выборки требует, чтобы разработчик создал:

  • три действия (запрос на получение, успешно, не удалось)
  • три редуктора (запрос на выборку, успешно, не удалось)
  • одно промежуточное ПО (обычно redux-saga или redux-thunk)

Написание всего этого кода занимает много времени даже для простого вызова API.

Процесс Redux для операции выборки:

  1. Отправьте действие fetchSomething() из компонента
  2. Это действие попадает в Редуктор, который обновит store на что-то вроде isLoading: true
  3. Компонент повторно визуализирует и отображает загрузчик
  4. Тем временем Action попадает в промежуточное программное обеспечение, которое заботится о вызове API.
  5. API возвращает ответ промежуточному программному обеспечению, которое отправляет другое действие: fetchSomethingSucceeded() в случае успеха или fetchSomethingFailed() в случае ошибки.
  6. Успешное / неудачное действие попадает в Редуктор, который обновляет store
  7. Наконец, ответ возвращается компоненту (необязательно через мемоизированный селектор), который покажет данные.

Каждая операция выборки, выполняемая Redux, должна сохранять свои состояния загрузки и ответа в хранилище Redux. Это просто чрезмерное использование магазина Redux.

Однако цель этой статьи - предоставить вам лучшую альтернативу Redux.

React Query

  • React Query - одна из лучших библиотек для управления состояниями сервера.
  • React Query специально разработан для управления любым асинхронным состоянием, которое вы получаете вне приложения: состояние сервера, состояние API, которое не является локальным. состояние клиента.

В общем глобальном хранилище может иметь состояние клиента и сервера.

  • Для состояния сервера мы можем использовать React Query.
  • Для состояния клиента мы можем реагировать на хуки, такие как useContext и userReducer или redux.

Библиотека экспортирует ловушку с именем useQuery, которая принимает два аргумента:

useQuery('repoData', fetcher)
  1. Уникальный идентификатор по вашему выбору. Он используется для сохранения результата API в queryCache, умном локальном кэше, управляемом React Query. Этот кеш также доступен через API библиотеки. Например, repoData - это идентификатор
  2. Функция, которая вызывает API и возвращает обещание. Пример, сборщик
 import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
 const queryClient = new QueryClient();
 export default function App() {
    return (
      <QueryClientProvider client={queryClient}>
        <Example />
      </QueryClientProvider>
     )
   }
const fetcher = () => {
   return fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res => res.json());
}
const Example = () => {
  const { isLoading, error, data } = useQuery('repoData', fetcher)
  if (isLoading) return 'Loading...'
  if (error) return 'An error has occurred: ' + error.message
   return (
     <div>
       <h1>{data.name}</h1>
       <p>{data.description}</p>
       <strong> {data.subscribers_count}</strong>{' '}
       <strong> {data.stargazers_count}</strong>{' '}
       <strong> {data.forks_count}</strong>
     </div>
   )
 }

Советы

  • Никогда не используйте useQuery внутри Компонента. Вместо этого заверните его в специальный крючок. Это сохранит ваш компонент абстрагированным от библиотеки и увеличит разделение, а также сделает запрос многоразовым и тестируемым.

Есть ли минусы?

Ссылка на репо, https://react-query-fetch.stackblitz.io

Выводы

  • Я считаю, что React Query - отличная альтернатива Redux для получения данных.
  • В любом случае Redux может быть для вас лучшим выбором.
  • Удачного кодирования! 💻

Не забудьте подписаться на публикацию The Lean Programmer Publication, чтобы увидеть больше таких статей, и подпишитесь на нашу рассылку tinyletter.com/TheLeanProgrammer