Зачем нужно управление состоянием

▸Проблема prop drilling

Когда данные нужно передать через много уровней компонентов, возникает prop drilling. Это делает код шумным и трудноподдерживаемым.

▸Когда нужно управление состоянием

Глобальное состояние (авторизация, тема, язык)

Данные, используемые в разных частях приложения

Сложная бизнес-логика с множеством операций

Кэширование данных с сервера

Redux Toolkit: современный подход

▸Установка и настройка

bash

1npm install @reduxjs/toolkit react-redux

▸Создание slice

tsx

1import { createSlice, configureStore } from '@reduxjs/toolkit';
2
3const userSlice = createSlice({
4  name: 'user',
5  initialState: { name: '', email: '', isAuthenticated: false },
6  reducers: {
7    setUser: (state, action) => {
8      state.name = action.payload.name;
9      state.email = action.payload.email;
10      state.isAuthenticated = true;
11    },
12    logout: (state) => {
13      state.name = '';
14      state.email = '';
15      state.isAuthenticated = false;
16    },
17  },
18});
19
20export const { setUser, logout } = userSlice.actions;
21export default userSlice.reducer;

▸Store и Provider

tsx

1const store = configureStore({
2  reducer: { user: userSlice.reducer },
3});
4
5function App() {
6  return (
7    <Provider store={store}>
8      <MyApp />
9    </Provider>
10  );
11}

▸Использование в компонентах

tsx

1import { useSelector, useDispatch } from 'react-redux';
2
3function UserProfile() {
4  const { name, email } = useSelector(state => state.user);
5  const dispatch = useDispatch();
6
7  return (
8    <div>
9      <p>{name} - {email}</p>
10      <button onClick={() => dispatch(logout())}>Выйти</button>
11    </div>
12  );
13}

Zustand: минимальное управление состоянием

▸Установка

bash

1npm install zustand

▸Создание store

tsx

1import { create } from 'zustand';
2
3const useUserStore = create((set) => ({
4  name: '',
5  email: '',
6  isAuthenticated: false,
7  setUser: (name, email) => set({ name, email, isAuthenticated: true }),
8  logout: () => set({ name: '', email: '', isAuthenticated: false }),
9}));

▸Использование

tsx

1function UserProfile() {
2  const name = useUserStore(state => state.name);
3  const logout = useUserStore(state => state.logout);
4
5  return (
6    <div>
7      <p>{name}</p>
8      <button onClick={logout}>Выйти</button>
9    </div>
10  );
11}

Сравнение API

▸Объявление состояния

Redux требует создать slice с action creators и reducer. Zustand — просто объект с методами. Zustand значительно компактнее.

▸Доступ к состоянию

Redux использует useSelector и useDispatch. Zustand — кастомные хуки для каждого store. Оба подхода работают с selectors для оптимизации ре-рендеров.

▸Мутации

Redux Toolkit позволяет мутировать state напрямую (immutability через Immer). Zustand также поддерживает мутации — вызов set() обновляет state.

Производительность

▸Ре-рендеры

Оба библиотеки оптимизированы. Redux использует shallow comparison selectors. Zustand по умолчанию сравнивает ссылки, но поддерживает кастомные selectors.

▸Bundle size

Zustand: ~1.1 KB (minified). Redux Toolkit + React Redux: ~11 KB. Разница в 10 раз.

▸Provider overhead

Redux требует Provider обертку. Zustand — нет, store доступен отовсюду. Это упрощает тестирование и tree-shaking.

TypeScript

▸Redux Toolkit

tsx

1interface UserState {
2  name: string;
3  email: string;
4  isAuthenticated: boolean;
5}
6
7const userSlice = createSlice({
8  name: 'user',
9  initialState: {} as UserState,
10  reducers: {
11    setUser: (state, action: PayloadAction<{name: string; email: string}>) => {
12      state.name = action.payload.name;
13      state.email = action.payload.email;
14    },
15  },
16});

▸Zustand

tsx

1interface UserState {
2  name: string;
3  email: string;
4  setUser: (name: string, email: string) => void;
5}
6
7const useUserStore = create<UserState>((set) => ({
8  name: '',
9  email: '',
10  setUser: (name, email) => set({ name, email }),
11}));

Middleware и расширения

▸Redux middleware

Redux поддерживает middleware для side effects (thunk, saga), логирования, devtools. Redux DevTools — мощный инструмент для отладки.

▸Zustand middleware

tsx

1import { persist } from 'zustand/middleware';
2
3const useStore = create(
4  persist(
5    (set) => ({ count: 0, increment: () => set(state => ({ count: state.count + 1 })) }),
6    { name: 'counter-storage' }
7  )
8);

Когда выбирать Redux

Крупное приложение с сложной бизнес-логикой

Нужны Redux DevTools и time-travel debugging

Команда привыкла к Redux экосистеме

Нужны middleware для side effects (saga)

Когда выбирать Zustand

Маленькое или среднее приложение

Нужна минимальная boilerplate

Быстрый старт без лишней конфигурации

Микро-сервисная архитектура с изолированными store

Заключение

Redux Toolkit и Zustand — оба отличные выборы. Redux — зрелая экосистема с богатыми возможностями. Zustand — минималистичная альтернатива с маленьким bundle size. Выбирайте исходя из масштаба проекта и требований команды.

#react#zustand#redux#управление-состоянием#state-management

React≈ 13 мин чтения5 июня 2024 г.

Zustand vs Redux: выбор управления состоянием в 2024

Сравнение Zustand и Redux Toolkit: синтаксис, производительность, TypeScript и когда какой инструмент лучше использовать.

Зачем нужно управление состоянием

▸Проблема prop drilling

▸Когда нужно управление состоянием

Глобальное состояние (авторизация, тема, язык)

Данные, используемые в разных частях приложения

Сложная бизнес-логика с множеством операций

Кэширование данных с сервера

Redux Toolkit: современный подход

▸Установка и настройка

bash

1npm install @reduxjs/toolkit react-redux

▸Создание slice

tsx

1import { createSlice, configureStore } from '@reduxjs/toolkit';
2
3const userSlice = createSlice({
4  name: 'user',
5  initialState: { name: '', email: '', isAuthenticated: false },
6  reducers: {
7    setUser: (state, action) => {
8      state.name = action.payload.name;
9      state.email = action.payload.email;
10      state.isAuthenticated = true;
11    },
12    logout: (state) => {
13      state.name = '';
14      state.email = '';
15      state.isAuthenticated = false;
16    },
17  },
18});
19
20export const { setUser, logout } = userSlice.actions;
21export default userSlice.reducer;

▸Store и Provider

tsx

1const store = configureStore({
2  reducer: { user: userSlice.reducer },
3});
4
5function App() {
6  return (
7    <Provider store={store}>
8      <MyApp />
9    </Provider>
10  );
11}

▸Использование в компонентах

tsx

1import { useSelector, useDispatch } from 'react-redux';
2
3function UserProfile() {
4  const { name, email } = useSelector(state => state.user);
5  const dispatch = useDispatch();
6
7  return (
8    <div>
9      <p>{name} - {email}</p>
10      <button onClick={() => dispatch(logout())}>Выйти</button>
11    </div>
12  );
13}

Zustand: минимальное управление состоянием

▸Установка

bash

1npm install zustand

▸Создание store

tsx

1import { create } from 'zustand';
2
3const useUserStore = create((set) => ({
4  name: '',
5  email: '',
6  isAuthenticated: false,
7  setUser: (name, email) => set({ name, email, isAuthenticated: true }),
8  logout: () => set({ name: '', email: '', isAuthenticated: false }),
9}));

▸Использование

tsx

1function UserProfile() {
2  const name = useUserStore(state => state.name);
3  const logout = useUserStore(state => state.logout);
4
5  return (
6    <div>
7      <p>{name}</p>
8      <button onClick={logout}>Выйти</button>
9    </div>
10  );
11}

Сравнение API

▸Объявление состояния

Redux требует создать slice с action creators и reducer. Zustand — просто объект с методами. Zustand значительно компактнее.

▸Доступ к состоянию

▸Мутации

Производительность

▸Ре-рендеры

▸Bundle size

Zustand: ~1.1 KB (minified). Redux Toolkit + React Redux: ~11 KB. Разница в 10 раз.

▸Provider overhead

Redux требует Provider обертку. Zustand — нет, store доступен отовсюду. Это упрощает тестирование и tree-shaking.

TypeScript

▸Redux Toolkit

tsx

1interface UserState {
2  name: string;
3  email: string;
4  isAuthenticated: boolean;
5}
6
7const userSlice = createSlice({
8  name: 'user',
9  initialState: {} as UserState,
10  reducers: {
11    setUser: (state, action: PayloadAction<{name: string; email: string}>) => {
12      state.name = action.payload.name;
13      state.email = action.payload.email;
14    },
15  },
16});

▸Zustand

tsx

1interface UserState {
2  name: string;
3  email: string;
4  setUser: (name: string, email: string) => void;
5}
6
7const useUserStore = create<UserState>((set) => ({
8  name: '',
9  email: '',
10  setUser: (name, email) => set({ name, email }),
11}));

Middleware и расширения

▸Redux middleware

Redux поддерживает middleware для side effects (thunk, saga), логирования, devtools. Redux DevTools — мощный инструмент для отладки.

▸Zustand middleware

tsx

1import { persist } from 'zustand/middleware';
2
3const useStore = create(
4  persist(
5    (set) => ({ count: 0, increment: () => set(state => ({ count: state.count + 1 })) }),
6    { name: 'counter-storage' }
7  )
8);

Когда выбирать Redux

Крупное приложение с сложной бизнес-логикой

Нужны Redux DevTools и time-travel debugging

Команда привыкла к Redux экосистеме

Нужны middleware для side effects (saga)

Когда выбирать Zustand

Маленькое или среднее приложение

Нужна минимальная boilerplate

Быстрый старт без лишней конфигурации

Микро-сервисная архитектура с изолированными store

Заключение

#react#zustand#redux#управление-состоянием#state-management

🛠

Попробуйте наш инструмент

Закрепите знания с помощью интерактивных упражнений

Перейти →

Зачем нужно управление состоянием

▸Проблема prop drilling

▸Когда нужно управление состоянием

Redux Toolkit: современный подход

▸Установка и настройка

▸Создание slice

▸Store и Provider

▸Использование в компонентах

Zustand: минимальное управление состоянием

▸Установка

▸Создание store

▸Использование

Сравнение API

▸Объявление состояния

▸Доступ к состоянию

▸Мутации

Производительность

▸Ре-рендеры

▸Bundle size

▸Provider overhead

TypeScript

▸Redux Toolkit

▸Zustand

Middleware и расширения

▸Redux middleware

▸Zustand middleware

Когда выбирать Redux

Когда выбирать Zustand

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня

Зачем нужно управление состоянием

▸Проблема prop drilling

▸Когда нужно управление состоянием

Redux Toolkit: современный подход

▸Установка и настройка

▸Создание slice

▸Store и Provider

▸Использование в компонентах

Zustand: минимальное управление состоянием

▸Установка

▸Создание store

▸Использование

Сравнение API

▸Объявление состояния

▸Доступ к состоянию

▸Мутации

Производительность

▸Ре-рендеры

▸Bundle size

▸Provider overhead

TypeScript

▸Redux Toolkit

▸Zustand

Middleware и расширения

▸Redux middleware

▸Zustand middleware

Когда выбирать Redux

Когда выбирать Zustand

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня