---
title: Управление состоянием
seo:
title: Управление состоянием — React Developer
description: "Тема «Управление состоянием» для собеседования React Developer. Какие популярные библиотеки для управления состоянием вы знаете, помимо встроенного useState? Какие паттерны использования Redux вы знаете?"
---
[Все темы React Developer](/react-developer)
## Какие популярные библиотеки для управления состоянием вы знаете, помимо встроенного useState? [#q-14bee738d69b8141a19bcb62066ead20]
Популярные библиотеки для управления состоянием в React:
{/* prettier-ignore */}
1. Redux:
- Централизованное хранилище состояния с предсказуемым поведением.
- Пример использования:
```javascript
import { createStore } from 'redux';
import { Provider } from 'react-redux';
```
1. MobX:
- Реактивное управление состоянием с фокусом на наблюдаемых данных и реакциях.
- Пример использования:
```javascript
import { observable } from 'mobx';
import { observer } from 'mobx-react';
```
1. Recoil:
- Recoil использует атомы и селекторы, но его репозиторий архивирован в январе 2025 года. Это исторический пример, а не рекомендация для нового проекта.
- Пример использования:
```javascript
import { RecoilRoot, atom, useRecoilState } from 'recoil';
```
1. Zustand:
- Легковесная и гибкая библиотека для управления состоянием.
- Пример использования:
```javascript
import { create } from 'zustand';
```
1. Context API:
- Встроенный механизм для управления глобальным состоянием с помощью контекста.
- Пример использования:
```javascript
import { createContext, useContext } from 'react';
```
Помимо встроенного useState, для управления состоянием в React популярны библиотеки Redux, MobX, Recoil, Zustand, а также встроенный Context API.
:::note[Ссылки для изучения]
1. [Управление состоянием в React](https://medium.com/nuances-of-programming/%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5%D0%BC-%D0%B2-react-%D0%BE%D0%B1%D0%B7%D0%BE%D1%80-1ae26cab1830)
:::
---
## Какие паттерны использования Redux вы знаете? [#q-14bee738d69b81ad83b2ea21d27219b5]
Паттерны использования Redux:
{/* prettier-ignore */}
1. Действия (Actions):
- Описывают изменения состояния через типы и полезную нагрузку.
- Пример:
```javascript
const increment = () => ({ type: 'INCREMENT' });
```
1. Редьюсеры (Reducers):
- Функции, которые описывают, как состояние изменяется в ответ на действия.
- Пример:
```javascript
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};
```
1. Хранилище (Store):
- Хранит состояние приложения и предоставляет методы для доступа к состоянию и отправки действий.
- Пример:
```javascript
import { createStore } from 'redux';
const store = createStore(counter);
```
1. Контейнерные компоненты (Container Components):
- Соединяют компоненты React с Redux-хранилищем с помощью connect.
- Пример:
```javascript
import { connect } from 'react-redux';
const mapStateToProps = (state) => ({ count: state });
const mapDispatchToProps = { increment };
export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);
```
1. Thunk Middleware:
- Позволяет писать действия, которые возвращают функции вместо объектов, для работы с асинхронными операциями.
- Пример:
```javascript
import { thunk } from 'redux-thunk';
import { applyMiddleware, createStore } from 'redux';
const store = createStore(rootReducer, applyMiddleware(thunk));
```
1. Селекторы (Selectors):
- Функции для выборки данных из состояния, повышают читаемость и повторное использование кода.
- Пример:
```javascript
const getCount = (state) => state.counter;
```
Популярные паттерны использования Redux включают действия, редьюсеры, хранилище, контейнерные компоненты, thunk middleware и селекторы. Эти паттерны помогают структурировать и управлять состоянием приложения эффективно.
:::note[Ссылки для изучения]
1. [Управление состоянием в React](https://medium.com/nuances-of-programming/%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5%D0%BC-%D0%B2-react-%D0%BE%D0%B1%D0%B7%D0%BE%D1%80-1ae26cab1830)
:::
---
## Какие альтернативы Redux для управления состоянием в React-приложениях? [#q-14bee738d69b81a0be51c85c58df6c04]
Альтернативы Redux для управления состоянием в React-приложениях:
{/* prettier-ignore */}
1. MobX:
- Реактивное управление состоянием с акцентом на наблюдаемые данные и автоматические реакции.
- Пример:
```javascript
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
```
1. Recoil:
- Recoil использует атомы и селекторы, но его репозиторий архивирован в январе 2025 года. Это исторический пример, а не рекомендация для нового проекта.
- Пример:
```javascript
import { RecoilRoot, atom, useRecoilState } from 'recoil';
```
1. Zustand:
- Легковесная и гибкая библиотека для управления состоянием.
- Пример:
```javascript
import { create } from 'zustand';
const useStore = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 }))
}));
```
1. Context API:
- Встроенный механизм для управления глобальным состоянием с помощью контекста.
- Пример:
```jsx
import { createContext, useContext, useState } from 'react';
const MyContext = createContext();
const MyProvider = ({ children }) => {
const [state, setState] = useState(0);
return {children};
};
```
1. XState:
- Управление состоянием с использованием конечных автоматов и диаграмм состояний.
- Схематичный пример старого API XState 4. В XState 5 используют createMachine или setup; useMachine вызывают внутри компонента или пользовательского хука:
```javascript
import { Machine } from 'xstate';
import { useMachine } from '@xstate/react';
const toggleMachine = Machine({ /* состояние машины */ });
const [state, send] = useMachine(toggleMachine);
```
1. React Query:
- Специализируется на управлении состоянием данных, извлекаемых из серверов.
- Пример для React Query 3; useQuery вызывается внутри компонента или пользовательского хука. В TanStack Query 5 используется объект параметров:
```javascript
import { useQuery } from 'react-query';
const { data, error, isLoading } = useQuery('data', fetchData);
```
Альтернативы Redux для управления состоянием в React-приложениях включают MobX, Recoil, Zustand, Context API, XState и React Query. Эти библиотеки и инструменты предлагают разные подходы и функциональные возможности для управления состоянием.
:::note[Ссылки для изучения]
1. [Управление состоянием в React](https://medium.com/nuances-of-programming/%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5%D0%BC-%D0%B2-react-%D0%BE%D0%B1%D0%B7%D0%BE%D1%80-1ae26cab1830)
:::