{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Что делает "},{"type":"text","marks":[{"type":"code"}],"text":"useReducer"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useReducer"},{"type":"text","text":" — это хук React, который позволяет управлять состоянием "},{"type":"text","marks":[{"type":"bold"}],"text":"через функцию-редьюсер (reducer)"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Он похож на принцип Redux:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"состояние изменяется не напрямую, а через “действие” (action)."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"⚙️ Синтаксис"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const [state, dispatch] = useReducer(reducer, initialState);\n"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"state"},{"type":"text","text":" — текущее состояние"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"dispatch"},{"type":"text","text":" — функция, которая отправляет “действие”"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"reducer(state, action)"},{"type":"text","text":" — функция, которая получает текущее состояние и “действие”,"},{"type":"hardBreak"},{"type":"text","text":"и "},{"type":"text","marks":[{"type":"bold"}],"text":"возвращает новое состояние"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"💡 Простой пример"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function reducer(state, 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\nfunction Counter() {\n const [state, dispatch] = useReducer(reducer, { count: 0 });\n\n return (\n

{state.count}

\n \n \n

\n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📊 Как это работает:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При клике React вызывает "},{"type":"text","marks":[{"type":"code"}],"text":"dispatch({ type: \"increment\" })"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React вызывает "},{"type":"text","marks":[{"type":"code"}],"text":"reducer(state, action)"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Reducer возвращает "},{"type":"text","marks":[{"type":"bold"}],"text":"новое состояние"},{"type":"text","text":" → React ререндерит компонент."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Чем "},{"type":"text","marks":[{"type":"code"}],"text":"useReducer"},{"type":"text","text":" отличается от "},{"type":"text","marks":[{"type":"code"}],"text":"useState"}]},{"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","marks":[{"type":"code"}],"text":"useState"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useReducer"}]}]}]},{"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":"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","marks":[{"type":"code"}],"text":"setState(newValue)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"dispatch({ type, payload })"}]}]}]},{"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":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вынесена в отдельную функцию ("},{"type":"text","marks":[{"type":"code"}],"text":"reducer"},{"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":"Простые кейсы (счётчик, форма, переключатель)"}]}]},{"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":"Малых компонентов"}]}]},{"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"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Мини-Redux в одном компоненте"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💬 Пример сравнения"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 Вариант с "},{"type":"text","marks":[{"type":"code"}],"text":"useState"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const [count, setCount] = useState(0);\n\nconst increment = () => setCount(count + 1);\nconst decrement = () => setCount(count - 1);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Просто, но не масштабируется, если логика сложная."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 Вариант с "},{"type":"text","marks":[{"type":"code"}],"text":"useReducer"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function reducer(state, action) {\n switch (action.type) {\n case \"increment\":\n return { ...state, count: state.count + 1 };\n case \"decrement\":\n return { ...state, count: state.count - 1 };\n case \"reset\":\n return { ...state, count: 0 };\n default:\n return state;\n }\n}\n\nconst [state, dispatch] = useReducer(reducer, { count: 0 });\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь ты можешь централизованно управлять логикой —"},{"type":"hardBreak"},{"type":"text","text":"удобно, когда много ветвлений или состояний."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧰 Когда лучше использовать "},{"type":"text","marks":[{"type":"code"}],"text":"useReducer"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Используй "},{"type":"text","marks":[{"type":"code"}],"text":"useReducer"},{"type":"text","text":", когда:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Состояние "},{"type":"text","marks":[{"type":"bold"}],"text":"сложное"},{"type":"text","text":" (например, объект с несколькими полями)."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Логика обновления "},{"type":"text","marks":[{"type":"bold"}],"text":"зависит от разных типов действий"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Несколько частей кода могут "},{"type":"text","marks":[{"type":"bold"}],"text":"обновлять одно и то же состояние"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Хочешь "},{"type":"text","marks":[{"type":"bold"}],"text":"разделить логику (reducer)"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"UI-компонент"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"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":"Многоэтапный процесс (wizard / onboarding)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Список элементов с фильтрацией, сортировкой, добавлением, удалением"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚡ Пример “форма” на "},{"type":"text","marks":[{"type":"code"}],"text":"useReducer"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function formReducer(state, action) {\n switch (action.type) {\n case \"changeField\":\n return { ...state, [action.field]: action.value };\n case \"reset\":\n return { name: \"\", email: \"\" };\n default:\n return state;\n }\n}\n\nfunction Form() {\n const [form, dispatch] = useReducer(formReducer, { name: \"\", email: \"\" });\n\n return (\n

\n \n dispatch({ type: \"changeField\", field: \"name\", value: e.target.value })\n }\n />\n \n dispatch({ type: \"changeField\", field: \"email\", value: e.target.value })\n }\n />\n \n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 Теперь можно легко расширять форму — просто добавляешь новый "},{"type":"text","marks":[{"type":"code"}],"text":"case"},{"type":"text","text":"."}]},{"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":"Ответ"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает "},{"type":"text","marks":[{"type":"code"}],"text":"useReducer"},{"type":"text","text":"?"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Управляет состоянием через функцию-редьюсер, реагируя на “действия” (actions)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чем отличается от "},{"type":"text","marks":[{"type":"code"}],"text":"useState"},{"type":"text","text":"?"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useState"},{"type":"text","text":" — просто хранит значение, "},{"type":"text","marks":[{"type":"code"}],"text":"useReducer"},{"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":"При сложных или связанных обновлениях"}]}]}]},{"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":"text","marks":[{"type":"code"}],"text":"useState"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чем похож на Redux?"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Тот же принцип “action → reducer → new state”, только локально"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

useReducer vs useState

Комментарии