Redux мертв, приветствуем контекстный API и React Query

Экосистема React за последние годы добилась значительных успехов в управлении состоянием. Redux, когда-то считавшийся идеальным решением для управления состоянием в сложных приложениях React, больше не является единственным игроком в городе. С введением Context API и React Query у разработчиков теперь есть мощные альтернативы, которые предлагают более рациональный и интуитивно понятный подход к управлению состоянием. В этой статье мы рассмотрим, почему Redux теряет свое очарование, и углубимся в то, как Context API и React Query могут эффективно справляться как с локальным, так и с удаленным управлением состоянием.

Упадок Redux:

Redux долгое время был основным продуктом разработки React благодаря предсказуемому управлению состоянием и надежной экосистеме промежуточного программного обеспечения и инструментов. Однако по мере развития React его собственные возможности обработки состояния значительно улучшились. С введением таких хуков, как useState и useReducer, React теперь предлагает легкое и более простое решение для управления локальным состоянием внутри компонентов. Этот сдвиг привел к снижению необходимости использования Redux для многих проектов.

Управление локальным состоянием с помощью Context API и useReducer:

Context API, представленный в React 16.3, предоставляет встроенное решение для управления глобальным состоянием без необходимости использования внешних библиотек, таких как Redux. Это позволяет более интуитивно обмениваться состоянием между компонентами. Контекстный API в сочетании с хуком useReducer может эффективно обрабатывать локальное управление состоянием.

Давайте рассмотрим пример, в котором у нас есть простой компонент-счетчик, которому необходимо поддерживать свое собственное состояние:

import React, { useContext, useReducer } from 'react';

const CounterContext = React.createContext();

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      <div>
        Count: {state.count}
        <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
        <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
      </div>
    </CounterContext.Provider>
  );
};

const DisplayCount = () => {
  const { state } = useContext(CounterContext);

  return <div>Count: {state.count}</div>;
};

В приведенном выше примере мы создаем компонент-счетчик, который поддерживает свое состояние с помощью хука useReducer. Мы создаем контекст, используя React.createContext(), и предоставляем состояние и функцию отправки дочерним компонентам, используя CounterContext.Provider. Компонент DisplayCount получает состояние из контекста и отображает его.

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

Удаленное управление состоянием с помощью React Query. Хотя управление локальным состоянием имеет решающее значение, многие приложения также требуют эффективного управления удаленными данными. Вот где сияет React Query. React Query — это мощная библиотека для извлечения данных, которая упрощает обработку удаленного состояния, предоставляя декларативный и эффективный подход.

Давайте рассмотрим пример, в котором мы получаем список задач из API и отображаем их:

import React from 'react';
import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery('todos', () =>
    fetch('https://api.example.com/todos').then((res) => res.json())
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.map((todo) => (
        <div key={todo.id}>{todo.title}</div>
      ))}
    </div>
  );
};

В этом примере мы используем хук useQuery, предоставляемый React Query, для получения задач из API. React Query выполняет кэширование, автоматическую повторную загрузку и обработку ошибок, что позволяет нам сосредоточиться на логике рендеринга. Он обеспечивает чистый и лаконичный способ управления удаленным состоянием, устраняя необходимость в сложных абстракциях, таких как промежуточное ПО Redux.

Redux, несомненно, сыграл значительную роль в истории управления состоянием React. Однако с развитием самого React у нас теперь есть альтернативы, такие как Context API и React Query, которые предлагают более простые и интуитивно понятные решения как для локального, так и для удаленного управления состоянием. Используя эти новые инструменты, разработчики могут оптимизировать свою кодовую базу, улучшить ремонтопригодность и воспользоваться преимуществами последних достижений в экосистеме React. Итак, попрощайтесь с Redux и примите развивающийся ландшафт управления состоянием в React.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .