Почему предпочтительнее React Query перед Redux?
Я всегда считал, что должен быть лучший способ сделать то же самое с React JS. Хотя я использовал Redux для обработки выборки данных в проектах.
Почему React Query?
В redux каждая операция выборки требует, чтобы разработчик создал:
- три действия (запрос на получение, успешно, не удалось)
- три редуктора (запрос на выборку, успешно, не удалось)
- одно промежуточное ПО (обычно redux-saga или redux-thunk)
Написание всего этого кода занимает много времени даже для простого вызова API.
Процесс Redux для операции выборки:
- Отправьте действие
fetchSomething()
из компонента - Это действие попадает в Редуктор, который обновит
store
на что-то вродеisLoading: true
- Компонент повторно визуализирует и отображает загрузчик
- Тем временем Action попадает в промежуточное программное обеспечение, которое заботится о вызове API.
- API возвращает ответ промежуточному программному обеспечению, которое отправляет другое действие:
fetchSomethingSucceeded()
в случае успеха илиfetchSomethingFailed()
в случае ошибки. - Успешное / неудачное действие попадает в Редуктор, который обновляет
store
- Наконец, ответ возвращается компоненту (необязательно через мемоизированный селектор), который покажет данные.
Каждая операция выборки, выполняемая Redux, должна сохранять свои состояния загрузки и ответа в хранилище Redux. Это просто чрезмерное использование магазина Redux.
Однако цель этой статьи - предоставить вам лучшую альтернативу Redux.
React Query
- React Query - одна из лучших библиотек для управления состояниями сервера.
- React Query специально разработан для управления любым асинхронным состоянием, которое вы получаете вне приложения: состояние сервера, состояние API, которое не является локальным. состояние клиента.
В общем глобальном хранилище может иметь состояние клиента и сервера.
- Для состояния сервера мы можем использовать React Query.
- Для состояния клиента мы можем реагировать на хуки, такие как useContext и userReducer или redux.
Библиотека экспортирует ловушку с именем useQuery
, которая принимает два аргумента:
useQuery('repoData', fetcher)
- Уникальный идентификатор по вашему выбору. Он используется для сохранения результата API в
queryCache
, умном локальном кэше, управляемом React Query. Этот кеш также доступен через API библиотеки. Например, repoData - это идентификатор - Функция, которая вызывает 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
внутри Компонента. Вместо этого заверните его в специальный крючок. Это сохранит ваш компонент абстрагированным от библиотеки и увеличит разделение, а также сделает запрос многоразовым и тестируемым.
Есть ли минусы?
- Отладка
Redux DevTools действительно мощные и хорошо интегрированные с браузером, и даже если React Query также предоставляет DevTools, они пока несопоставимы. Библиотека в любом случае очень быстро растет, и регулярно внедряются новые функции.
Ссылка на репо, https://react-query-fetch.stackblitz.io
Выводы
- Я считаю, что React Query - отличная альтернатива Redux для получения данных.
- В любом случае Redux может быть для вас лучшим выбором.
- Удачного кодирования! 💻
Не забудьте подписаться на публикацию The Lean Programmer Publication, чтобы увидеть больше таких статей, и подпишитесь на нашу рассылку tinyletter.com/TheLeanProgrammer