Одна из причин за что НЕ любят Redux

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

Проблема одностраничных приложений

Появление фреймворков для создания одностраничных приложений (SPA), например, React, внесло множество изменений в то, как мы разрабатываем веб-приложения. Сильное разделение бэкэнда и фронтенда позволило нам сфокусироваться и разделить задачи между командами. Это также внесло много сложностей, особенно в сопровождении состояния веб-приложения. Асинхронный запрос данных теперь означает, что данные должны находиться в двух местах: во фронтенде и на бекенде. Мы должны подумать о том, как лучше всего хранить эти данные глобально, чтобы они были доступны для всех наших компонентов, сохраняя при этом кэш данных для экономии времени на частых запросах. Большая часть разработки фронтенда теперь включает поддержку глобального хранилища - денормализации данных, устаревание данных и различные специфические баги.

Redux - это не кэш

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

Граница между ответственностью бэкэнда и фротенда быстро стирается, когда мы начинаем воссоздавать базу данных на фротенде . Как фротенд-разработчикам, нам не нужно досконально разбираться в таблицах и их связях, чтобы создать простой пользовательский интерфейс. Нам также не нужно знать, как лучше всего нормализовать наши данные. Эта ответственность должна лежать на людях, которые сами проектируют таблицы — на бэкэнд-разработчиках. Бэкенд-разработчики затем могут предоставить абстракцию для фронтенд-разработчиков в виде документированного API. В настоящее время существует множество библиотек (redux-observable, redux-saga и redux-thunk, и это лишь некоторые из них), построенных вокруг Redux, чтобы помочь нам управлять данными из бэкэнда, каждая из которых добавляет уровень сложности к уже и так сложной для инициализации библиотеке. Иногда нам нужно сделать шаг назад, прежде чем сделать шаг вперед.

Более простой подход к хранению данных с бэкэнда

Есть пара библиотек, которые обладают преимуществами перед Redux (или аналогичной библиотекой управления состоянием) для хранения состояния бэкэнда.

React Query

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

Чтобы сравнить эту библиотеку с Redux, рассмотрим пример двух методов. Для примера используем простой список TODO, полученный с сервера. Реализация с Redux.

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import axios from 'axios';

const SET_TODOS = "SET_TODOS";

export const rootReducer = (state = { todos: [] }, action) => {
  switch (action.type) {
    case SET_TODOS:
      return { ...state, todos: action.payload };
    default:
      return state;
  }
};

export const App = () => {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  useEffect(() => {
    const fetchPosts = async () => {
      const { data } = await axios.get("/api/todos");
      dispatch({
        type: SET_TODOS,
        payload: data
      });
    };

    fetchPosts();
  }, []);

  return (
    <ul>{todos.length > 0 && todos.map((todo) => <li>{todo.text}</li>)}</ul>
  );
};

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

import React from "react";
import { useQuery } from "react-query";
import axios from "axios";

const fetchTodos = async () => {
  const { data } = await axios.get("/api/todos");
  return data;
};

const App = () => {
  const { data } = useQuery("todos", fetchTodos);

  return data ? (
    <ul>{data.length > 0 && data.map((todo) => <li>{todo.text}</li>)}</ul>
  ) : null;
};

По умолчанию код с React Query уже включают повторную выборку данных, кэширование и инвалидацию устаревших данных с предустановленной конфигурацией. Можно также установить конфигурацию кэширования на глобальном уровне. Везде, где вам нужны эти данные, теперь вы можете использовать хук useQuery с уникальным ключом, который вы установили (в данном случае todos), и асинхронным вызовом для получения данных. Пока функция асинхронная, реализация не имеет значения — вы можете так же легко использовать Fetch API вместо Axios. Для изменения внутреннего состояния React Query предоставляет хук useMutation.

SWR

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

Apollo Client

SWR и React Query ориентированы на REST API, но если вам нужно что-то подобное для GraphQL, то явным претендентом является Apollo Client. Также приятно, что синтаксис почти идентичен React Query.

Встроенные возможности для работы с состоянием

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

// чисто, красиво и просто
const [состояние, setState] = useState();

Есть несколько типичных ситуаций передачи данные между компонентами в React:

• от родительского компонента к дочернему;
• от дочернего компонента к родительскому;
• между соседними компонентами;
• от компонента к компоненту-потомку (через несколько уровней вниз);
• от компонента к компоненту-предку (через несколько уровней вверх).

Данные можно передавать:

• через пропсы;
• используя callback-функцию;
• пробросом пропсов от уровня к уровню (prop drilling);
• при помощи контекста (React Context AP);
• через хранилище (store);

На практике также приходится передавать данные не только между компонентами, но и между страницами. Способы передачи данных между компонентами, находящимися на разных страницах, с помощью React Router можно прочитать в статье Полное руководство по React Router v6. Часть 3 - Управление навигацией.

От родительского компонента к дочернему

Наиболее простой и часто встречающийся случай - это случай, когда дочерний компонент принимает данные от родителя через пропсы.

import { useState } from 'react'

const Parent = () => {
  const [value, setValue] = useState('')

  const handleChange = (event) => {
    setValue(event.target.value)
  }

  return (
    <div>
       <input
         type="text"
         onChange={handleChange }
       />
      {/* передаем проп в дочерний компонент */}
      <Child value={value} />
    </div>
  )
}

const Child = ({ value }) => {
  return (
    <span>Value is: {value || '<Not set>'}</span>
  )
}

От дочернего компонента к родительскому

Если необходимо передать данные от дочернего реакт компонента к родительскому, используются функции обратного вызова (callback-функции).

import { useState } from 'react'

const Child = ({ onChange }) => {
  const handleChange = (event) => {
    onChange(event.target.value) // callback-функция
  }

  return (
    <input
      type="text"
      onChange={handleChange}
    />
  )
}

const Parent = () => {
  const [value, setValue] = useState('')
  const handleChange = (value) => {
    setValue(value)
  }

  return (
    <div>
      <span>Value is: {value || '<Not set>'}</span>
      <Child onChange={handleChange} />
    </div>
  )
}

Между соседними компонентами

Данные между соседними компонентами, т.е. между компонентами на одном уровне, можно передать через общий предок. Обычно данные от одного Реакт компонента передаются вверх, в компонент-предок, через callback-функцию, а компонент-предок передает их в другой компонент через проп.

import { useState } from 'react'

const Parent = () => {
  const [value, setValue] = useState('')

  const handleChange = (value) => {
    setValue(value)
  }

  return (
    <div>
      <Sibling1 onChange={handleChange} />
      <Sibling2 value={value} />
    </div>
  )
}


const Sibling1 = ({ onChange }) => {
  const handleChange = (event) => {
    onChange(event.target.value)
  }

  return (
    <input
      type="text"
      onChange={handleChange}
    />
  )
}

const Sibling2 = ({ value}) => {
  return (
    <span>Value is: {value || '<Not set>'}</span>
  )
}

Через несколько уровней вверх/вниз

Если компоненты находится в несколько уровнях друг от друга, то также можно передать проп. Этот проп придется описывать во всех компонентах на всех промежуточных уровнях. Эта ситуация называется prop drilling. Если уровней много, то такой способ покажется не очень удобным. Если нужно передавать данные на несколько уровней вверх, то также придется описывать и вызывать callback-функцию на всех промежуточных уровнях. Однако, в подобных случаях можно использовать Context API (пример которого приведен ниже), или state management библиотеки, такие как Redux, MobX, Recoil и т.д.

import { useState, useContext, createContext } from 'react'

// создаем контекст
const ValueContext = createContext()

// Component1 записывает данные в контекст ValueContext
const Component1 = () => {
  const { setValue } = useContext(ValueContext)

  const handleChange = (event) => {
    setValue(event.target.value)
  }

  return (
    <input
      type="text"
      onChange={handleChange}
    />
  )
}

// Component2 читает данные из контекста ValueContext
const Component2 = () => {
  const { value } = useContext(ValueContext)

  return (
    <span>Value is: {value || '<Not set>'}</span>
  )
}

// компоненты, которым необходим доступ к контексту,
// должны быть обернуты в Provider
export default function App() {
  const [value, setValue] = useState('')

  return (
    <ValueContext.Provider value={{ value, setValue }}>
      <Component1 />
      <Component2 />
    </ValueContext.Provider>
  )
}

Исходный код Подробное руководство по React