Какой знаешь способ прокидывания кроме Redux?

Современные альтернативы Redux для управления состоянием в React-приложениях

Redux долгое время был де-факто стандартом для управления состоянием в крупных React-приложениях, однако современная экосистема предлагает множество альтернатив, которые часто являются более легковесными, интуитивно понятными и специализированными под конкретные сценарии. Вот основные подходы и библиотеки:

1. Context API + useReducer (встроенное решение React)

Нативное решение React, идеально подходящее для средних по сложности приложений или для изоляции специфических частей состояния.

// Создание контекста
const UserContext = React.createContext();

// Провайдер с useReducer
const UserProvider = ({ children }) => {
  const [state, dispatch] = useReducer(userReducer, initialState);
  
  return (
    <UserContext.Provider value={{ state, dispatch }}>
      {children}
    </UserContext.Provider>
  );
};

// Потребление в компоненте
const UserProfile = () => {
  const { state } = useContext(UserContext);
  return <div>{state.user.name}</div>;
};

Преимущества:

• Не требует дополнительных зависимостей
• Хорошо интегрируется с React-экосистемой
• Подходит для средних приложений

Недостатки:

• Нет встроенной оптимизации перерисовок
• Может стать громоздким при большом количестве контекстов

2. Zustand

Минималистичная библиотека, ставшая популярной благодаря простоте API и производительности.

import create from 'zustand';

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

// Использование в компоненте
function BearCounter() {
  const bears = useStore((state) => state.bears);
  const increase = useStore((state) => state.increasePopulation);
  
  return (
    <button onClick={increase}>
      Количество медведей: {bears}
    </button>
  );
}

3. MobX

Библиотека, основанная на реактивном программировании и observable-состоянии.

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

class CartStore {
  items = [];
  
  constructor() {
    makeAutoObservable(this);
  }
  
  addItem(product) {
    this.items.push(product);
  }
  
  get totalItems() {
    return this.items.length;
  }
}

const cartStore = new CartStore();

// React-компонент
const Cart = observer(() => {
  return <div>Товаров в корзине: {cartStore.totalItems}</div>;
});

4. Recoil (от Meta)

Решение от создателей React, основанное на концепции атомов и селекторов.

import { atom, selector, useRecoilValue } from 'recoil';

// Атом - минимальная единица состояния
const userState = atom({
  key: 'userState',
  default: null,
});

// Селектор - производное состояние
const userProfileSelector = selector({
  key: 'userProfileSelector',
  get: ({ get }) => {
    const user = get(userState);
    return user ? `${user.name} (${user.email})` : 'Гость';
  },
});

function UserProfile() {
  const profile = useRecoilValue(userProfileSelector);
  return <div>{profile}</div>;
}

5. React Query / TanStack Query

Специализированная библиотека для управления серверным состоянием, кэширования и синхронизации.

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function UserList() {
  const { data, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });
  
  const queryClient = useQueryClient();
  
  const mutation = useMutation({
    mutationFn: addUser,
    onSuccess: () => {
      queryClient.invalidateQueries(['users']);
    },
  });
  
  if (isLoading) return <div>Загрузка...</div>;
  
  return (
    <div>
      {data.map(user => <div key={user.id}>{user.name}</div>)}
    </div>
  );
}

6. Jotai

Библиотека, вдохновленная Recoil, но с более минималистичным API и основанная на примитивах атомов.

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);
const doubledAtom = atom((get) => get(countAtom) * 2);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubled] = useAtom(doubledAtom);
  
  return (
    <div>
      <div>Счетчик: {count}</div>
      <div>Удвоенное: {doubled}</div>
      <button onClick={() => setCount(count + 1)}>
        Увеличить
      </button>
    </div>
  );
}

7. Valtio

Библиотека, использующая прокси-объекты для создания реактивного состояния.

import { proxy, useSnapshot } from 'valtio';

const state = proxy({ count: 0, text: 'hello' });

function Counter() {
  const snap = useSnapshot(state);
  
  return (
    <div>
      <div>{snap.count}</div>
      <button onClick={() => { state.count++ }}>
        Увеличить
      </button>
    </div>
  );
}

Критерии выбора альтернативы

При выборе решения учитывайте:

• Размер приложения: для мелких/средних - Context API или Zustand, для крупных - Recoil или MobX
• Тип состояния:
  • Клиентское состояние - Zustand, Jotai
  • Серверное состояние - React Query, SWR
  • Сложная бизнес-логика - MobX
• Производительность: Recoil и Jotai предлагают гранулярные обновления
• Кривая обучения: Zustand и Context API наиболее просты
• Экосистема и сообщество: Redux и MobX имеют богатые экосистемы

Практические рекомендации

1. Начните с простого: используйте Context API + useReducer, если не уверены
2. Комбинируйте подходы: React Query для серверного состояния + Zustand для клиентского
3. Избегайте преждевременной оптимизации: не используйте сложные решения для простых задач
4. Учитывайте командный опыт: выберите инструмент, который понимает вся команда

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