153 lines
7.5 KiB
Markdown
153 lines
7.5 KiB
Markdown
---
|
||
sidebar_position: 2
|
||
---
|
||
|
||
# Экосистема Redux
|
||
|
||
Redux — это популярный менеджер состояний (state management library) для JavaScript-приложений, включая React. Он предоставляет централизованное хранилище (store) для управления состоянием всего приложения, что делает его особенно полезным для больших и сложных приложений.
|
||
|
||
## Основные концепции Redux:
|
||
1. **Store (хранилище):**
|
||
- Единый источник истины (_single source of truth_) для состояния всего приложения.
|
||
- Хранит всё состояние приложения в виде одного большого объекта.
|
||
- Создаётся с помощью функции `createStore` (в классическом Redux) или `configureStore` (в Redux Toolkit).
|
||
2. **State (состояние):**
|
||
- Это данные, которые хранятся в **store**.
|
||
- State доступен только для чтения. Чтобы изменить **state**, нужно отправить **action**.
|
||
3. **Actions (действия):**
|
||
- Это объекты, которые описывают, что должно произойти.
|
||
- Действия должны иметь поле `type`, которое указывает на тип действия, и могут содержать дополнительные данные (**payload**).
|
||
```js
|
||
const increment = () => ({
|
||
type: 'INCREMENT',
|
||
});
|
||
|
||
const addTodo = (text) => ({
|
||
type: 'ADD_TODO',
|
||
payload: text,
|
||
});
|
||
```
|
||
4. **Reducers (редьюсеры):**
|
||
- Это чистые функции, которые определяют, как состояние (**state**) изменяется в ответ на действия (**actions**).
|
||
- Редьюсер принимает текущее состояние и действие, а затем возвращает новое состояние.
|
||
```js
|
||
const initialState = { count: 0 };
|
||
|
||
function counterReducer(state = initialState, action) {
|
||
switch (action.type) {
|
||
case 'INCREMENT':
|
||
return { ...state, count: state.count + 1 };
|
||
case 'DECREMENT':
|
||
return { ...state, count: state.count - 1 };
|
||
default:
|
||
return state;
|
||
}
|
||
}
|
||
```
|
||
5. **Dispatch (диспетчеризация):**
|
||
- Это метод **store**, который используется для отправки действий (**actions**) в редьюсер.
|
||
```js
|
||
store.dispatch({ type: 'INCREMENT' });
|
||
```
|
||
6. **Subscribe (подписка):**
|
||
- Это метод **store**, который позволяет подписаться на изменения состояния.
|
||
```js
|
||
store.subscribe(() => {
|
||
console.log('State changed:', store.getState());
|
||
});
|
||
```
|
||
|
||
## Как Redux работает с React?
|
||
Для интеграции Redux с React используется библиотека react-redux, которая предоставляет два основных инструмента:
|
||
|
||
1. Provider:
|
||
- Компонент, который делает store доступным для всех компонентов приложения.
|
||
```jsx
|
||
import { Provider } from 'react-redux';
|
||
import store from './store';
|
||
|
||
function App() {
|
||
return (
|
||
<Provider store={store}>
|
||
<MyComponent />
|
||
</Provider>
|
||
);
|
||
}
|
||
```
|
||
2. Hooks:
|
||
- useSelector: Позволяет компоненту получать данные из store.
|
||
- useDispatch: Позволяет компоненту отправлять действия (actions).
|
||
```jsx
|
||
import { useSelector, useDispatch } from 'react-redux';
|
||
|
||
function Counter() {
|
||
const count = useSelector((state) => state.count);
|
||
const dispatch = useDispatch();
|
||
|
||
return (
|
||
<div>
|
||
<p>Count: {count}</p>
|
||
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
## Преимущества Redux:
|
||
1. Централизованное состояние:
|
||
- Всё состояние приложения хранится в одном месте, что упрощает управление и отладку.
|
||
2. Предсказуемость:
|
||
- Состояние изменяется только через действия и редьюсеры, что делает поведение приложения предсказуемым.
|
||
3. Инструменты разработчика:
|
||
- Redux DevTools позволяют отслеживать изменения состояния, отменять действия и многое другое.
|
||
4. Масштабируемость:
|
||
- Redux хорошо подходит для больших приложений с множеством компонентов и сложной логикой состояния.
|
||
5. Сообщество и экосистема:
|
||
- Redux имеет огромное сообщество и множество дополнительных библиотек (например, Redux Thunk, Redux Saga).
|
||
|
||
## Недостатки Redux:
|
||
1. Boilerplate:
|
||
- Redux требует написания большого количества кода (actions, reducers, store), что может быть избыточным для небольших приложений.
|
||
2. Сложность:
|
||
- Для новичков Redux может показаться сложным из-за множества концепций и шагов.
|
||
3. Производительность:
|
||
- Неправильное использование Redux может привести к лишним ререндерам компонентов.
|
||
|
||
## Redux Toolkit (RTK):
|
||
Чтобы упростить работу с Redux, команда разработчиков создала **Redux Toolkit** — официальный набор инструментов для Redux. Он включает:
|
||
|
||
- **configureStore:** Упрощает создание **store**.
|
||
- **createSlice:** Позволяет объединить **actions** и **reducers** в одном месте.
|
||
- **createAsyncThunk:** Упрощает работу с асинхронными действиями.
|
||
- Встроенную поддержку Redux **DevTools** и **middleware** (например, Thunk).
|
||
|
||
Пример с Redux Toolkit:
|
||
```js
|
||
import { createSlice, configureStore } from '@reduxjs/toolkit';
|
||
|
||
const counterSlice = createSlice({
|
||
name: 'counter',
|
||
initialState: { value: 0 },
|
||
reducers: {
|
||
increment: (state) => {
|
||
state.value += 1;
|
||
},
|
||
decrement: (state) => {
|
||
state.value -= 1;
|
||
},
|
||
},
|
||
});
|
||
|
||
const store = configureStore({
|
||
reducer: counterSlice.reducer,
|
||
});
|
||
|
||
export const { increment, decrement } = counterSlice.actions;
|
||
export default store;
|
||
```
|
||
## Когда использовать Redux?
|
||
- В больших приложениях с множеством компонентов, которые зависят от общего состояния.
|
||
- Когда требуется централизованное управление состоянием.
|
||
- Когда нужно отслеживать и отлаживать изменения состояния (например, с помощью Redux DevTools).
|
||
|
||
Для небольших приложений **Redux** может быть избыточным, и в таких случаях лучше использовать **Context API** или другие более простые решения. |