update state, api, arch

2025-03-07 14:17:37 +03:00
parent 7484909864
commit 8263e7507a
40 changed files with 1774 additions and 57 deletions
--- a/docs/state-managers/02-redux.md
+++ b/docs/state-managers/02-redux.md
@@ -2,4 +2,152 @@
 sidebar_position: 2
 ---

-# Экосистема Redux
+# Экосистема 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** или другие более простые решения.