{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 Что такое "},{"type":"text","marks":[{"type":"bold"}],"text":"Redux"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Redux"},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"глобальное хранилище состояния (state manager)"},{"type":"text","text":" для JavaScript-приложений."},{"type":"hardBreak"},{"type":"text","text":"Он помогает "},{"type":"text","marks":[{"type":"bold"}],"text":"централизованно управлять состоянием"},{"type":"text","text":" (данными), чтобы разные части приложения могли синхронно реагировать на изменения."}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 Коротко: Redux — это “единый источник правды” (single source of truth)"},{"type":"hardBreak"},{"type":"text","text":"для всего состояния приложения."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Основная идея Redux"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React управляет "},{"type":"text","marks":[{"type":"bold"}],"text":"локальным состоянием компонентов"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":"useState"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"useReducer"},{"type":"text","text":")."},{"type":"hardBreak"},{"type":"text","text":"Но когда приложение становится большим, данные нужно "},{"type":"text","marks":[{"type":"bold"}],"text":"делить между разными компонентами"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример проблемы:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"// App.jsx\nfunction App() {\n const [user, setUser] = useState(null);\n\n return (\n <>\n \n \n \n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Все пропсы "},{"type":"text","marks":[{"type":"code"}],"text":"user"},{"type":"text","text":" приходятся "},{"type":"text","marks":[{"type":"bold"}],"text":"прокидывать через дерево компонентов"},{"type":"text","text":" →"},{"type":"hardBreak"},{"type":"text","text":"⚠️ неудобно, тяжело масштабировать, появляются ошибки."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ Redux решает это"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Он создаёт "},{"type":"text","marks":[{"type":"bold"}],"text":"одно общее хранилище (store)"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"куда кладётся всё состояние,"},{"type":"hardBreak"},{"type":"text","text":"и компоненты могут:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"читать нужные данные,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"обновлять их через “действия” (actions)."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Ключевые концепции Redux"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Элемент"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Аналогия"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Store"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Хранит всё состояние приложения"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Центральный склад данных"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Action"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Описывает "},{"type":"text","marks":[{"type":"italic"}],"text":"что произошло"},{"type":"text","text":" (обычный объект "},{"type":"text","marks":[{"type":"code"}],"text":"{ type, payload }"},{"type":"text","text":")"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Заказ на изменение"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Reducer"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чистая функция, которая "},{"type":"text","marks":[{"type":"italic"}],"text":"говорит, как менять состояние"},{"type":"text","text":" в ответ на action"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Рабочий, который обрабатывает заказ"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Dispatch"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Отправляет action в reducer"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Курьер, который доставляет заказ"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Selector"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Извлекает нужные данные из store"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Витрина, где берём товар"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧱 Пример"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1️⃣ Reducer — управляет изменениями"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function counterReducer(state = { count: 0 }, action) {\n switch (action.type) {\n case \"increment\":\n return { count: state.count + 1 };\n case \"decrement\":\n return { count: state.count - 1 };\n default:\n return state;\n }\n}\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2️⃣ Store — создаётся один раз"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { createStore } from \"redux\";\n\nconst store = createStore(counterReducer);\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"3️⃣ Компоненты подписываются"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { Provider, useSelector, useDispatch } from \"react-redux\";\n\nfunction Counter() {\n const count = useSelector(state => state.count);\n const dispatch = useDispatch();\n\n return (\n <>\n

{count}

\n \n \n \n );\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔄 Как работает Redux (пошагово)"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент вызывает "},{"type":"text","marks":[{"type":"code"}],"text":"dispatch({ type: \"increment\" })"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Redux передаёт это действие ("},{"type":"text","marks":[{"type":"code"}],"text":"action"},{"type":"text","text":") в "},{"type":"text","marks":[{"type":"code"}],"text":"reducer"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"reducer"},{"type":"text","text":" создаёт "},{"type":"text","marks":[{"type":"bold"}],"text":"новую копию состояния"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Store уведомляет все подписанные компоненты."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компоненты получают новое состояние через "},{"type":"text","marks":[{"type":"code"}],"text":"useSelector"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🎯 Зачем нужен Redux в React-приложениях"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Задача"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Почему помогает Redux"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔁 Глобальное состояние"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Все данные централизованы в одном месте"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🎯 Предсказуемость"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждое изменение проходит через reducer"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧠 Упрощённая отладка"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Redux DevTools показывают историю действий (time travel)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚙️ Масштабируемость"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно добавлять новые reducers (cart, user, products, ui)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔒 Иммутабельность"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"State нельзя мутировать — это делает логику чистой"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔗 Интеграции"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Redux Toolkit, Thunks, Saga, RTK Query для асинхронных данных"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Современный Redux = Redux Toolkit (RTK)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сегодня никто не пишет “голый” Redux."},{"type":"hardBreak"},{"type":"text","text":"Используют "},{"type":"text","marks":[{"type":"bold"}],"text":"Redux Toolkit (RTK)"},{"type":"text","text":" — официальную надстройку, которая упрощает всё:"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Автоматически создаёт store"},{"type":"hardBreak"},{"type":"text","text":"✅ Упрощает reducers"},{"type":"hardBreak"},{"type":"text","text":"✅ Добавляет асинхронные “thunks”"},{"type":"hardBreak"},{"type":"text","text":"✅ Оптимизирует иммутабельность"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример с RTK:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { configureStore, createSlice } from \"@reduxjs/toolkit\";\n\nconst counterSlice = createSlice({\n name: \"counter\",\n initialState: { count: 0 },\n reducers: {\n increment: state => { state.count++ },\n decrement: state => { state.count-- },\n },\n});\n\nexport const { increment, decrement } = counterSlice.actions;\nexport const store = configureStore({ reducer: counterSlice.reducer });\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📘 Итого"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Redux"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧭 Что это"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Централизованный state manager"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🎯 Для чего"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы управлять состоянием приложения в одном месте"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚙️ Как работает"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Через Store → Action → Reducer → View"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💪 Почему популярен"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Предсказуемость, прозрачность, масштабируемость"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧰 Современная реализация"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Redux Toolkit (RTK)"}]}]}]}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💬 "},{"type":"text","marks":[{"type":"bold"}],"text":"Коротко:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Redux нужен, когда приложение становится слишком большим,"},{"type":"hardBreak"},{"type":"text","text":"и тебе нужно "},{"type":"text","marks":[{"type":"bold"}],"text":"централизованно управлять состоянием"},{"type":"text","text":" —"},{"type":"hardBreak"},{"type":"text","text":"не таскать props, не плодить контексты,"},{"type":"hardBreak"},{"type":"text","text":"а иметь одну систему, где всё под контролем."}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что такое Redux?

Комментарии