👩‍💻 Как учить Redux и не утонуть в абстракциях

Redux часто вводит новичков в ступор: куча обёрток, абстракций, бойлерплейта, бесконечные конфиги… Нужно держать в голове, что где-то «в одном месте лежат данные», а использовать их можно совсем в другом. Всё это может сбивать с толку.
Разберёмся, как подойти к изучению Redux так, чтобы не перегореть и быстро прийти к результату.

🤔 1. Нужно ли знать старый Redux?

Сегодня знать классический Redux (до RTK) — не обязательно. Но понимать, как он устроен, всё же полезно для кругозора.
Лучше начать с Redux Toolkit (RTK) — это современный, удобный способ работы с Redux.

👉 План простой:
- Изучи RTK: пройди короткий курс, сделай мини-проект.
- Потом, для интереса, быстро глянь, как всё было «по-старинке» — чтобы понимать эволюцию и причины появления RTK.

Продвинутый Redux. Redux Toolkit, RTK query, TypeScript.
Полный курс Redux Toolkit + RTK Query для начинающих

📚 2. Освой базу (и не перегружайся)

На старте тебе нужно знать только основу Redux Toolkit:
- как создавать slice,
- как конфигурировать store,
- как использовать dispatch и useSelector,
- и как подключить всё через Provider.

Этого достаточно, чтобы начать. Не лезь сразу в thunk-и, middleware или сложные конфиги — это придёт позже. Главное — понять саму идею:

где-то создаются данные → ты можешь их менять → компонент реагирует и перерисовывается.

👨🏻‍💻 3. Практикуйся на реальных мини-проектах

Следующий шаг — практика. Смотри практические видео или мини-курсы вроде «Админка за 6 часов» — где используется React, RTK и другие знакомые технологии. А так же можно прогнать много небольших проектов, чтобы запомнить воркфлоу.

🔁 Идея проста:
- Делай много маленьких проектов, а не один гигантский.
- Лучше 10 разных по часу, чем один на 10 часов.

Так ты начнёшь видеть закономерности, узнавать шаблоны и быстрее адаптироваться к разным кейсам.

Build and Deploy a React Cryptocurrency App and Master Redux Toolkit

🚀 4. Создай свой проект

Когда чувствуешь уверенность — делай свой проект:
- подключи API,
- добавь дизайн,
- используй привычный шаблон, но адаптируй под себя.

Не стремись помнить всё наизусть — важно понимать принцип, а не синтаксис.
Добавляй новые сущности, слайсы, компоненты — играйся с кодом, расширяй границы.

😎 5. Главное — практика

На полноценное освоение основ Redux Toolkit достаточно около 2 недель.
Всё остальное время — практика и интеграция с другими инструментами.
Учись не «изолированно», а в реальных проектах, где Redux работает вместе с React, API, роутингом и UI-библиотеками.

Redux + Redux Toolkit | Продвинутый полный курс

#redux #frontend

#JavaScript
🚩 Почему вложенные callback превращают код в пирамиду ужаса?

Callback — это функция, которая передаётся в другую функцию как аргумент и выполняется позже, обычно после завершения асинхронной операции. Callback Hell (ад колбэков) — это ситуация, когда множество асинхронных операций вложены друг в друга, создавая глубокую пирамиду из фигурных скобок, которую невозможно читать.

// Плохо - Callback Hell (пирамида смерти)
getUser(userId, function(user) {
    getOrders(user.id, function(orders) {
        getOrderDetails(orders[0].id, function(details) {
            getPayment(details.paymentId, function(payment) {
                console.log(payment);
                // Код уезжает вправо на 4+ уровня
            });
        });
    });
});

// Хорошо - Promises с цепочкой
getUser(userId)
    .then(user => getOrders(user.id))
    .then(orders => getOrderDetails(orders[0].id))
    .then(details => getPayment(details.paymentId))
    .then(payment => console.log(payment))
    .catch(error => console.error(error));

// Ещё лучше - async/await
async function loadPayment(userId) {
    try {
        const user = await getUser(userId);
        const orders = await getOrders(user.id);
        const details = await getOrderDetails(orders[0].id);
        const payment = await getPayment(details.paymentId);
        console.log(payment);
    } catch (error) {
        console.error(error);
    }
}

📎Проблемы Callback Hell:

🟣Нечитаемый код — глубокая вложенность делает логику непонятной
🟣Сложная обработка ошибок — нужно добавлять проверки на каждом уровне
🟣Невозможность поддерживать — изменение логики требует переписывания всего
🟣Дублирование кода — обработка ошибок повторяется в каждом callback

Callback используются для асинхронных операций: загрузка данных, таймеры, события. Когда операция завершается, вызывается callback с результатом. Проблема возникает при последовательных зависимых операциях — каждая следующая требует результата предыдущей.

Promises решают проблему через цепочку .then(), где каждый шаг возвращает новый Promise. Ошибки обрабатываются в одном месте через .catch(). async/await делает асинхронный код похожим на синхронный, убирая вложенность полностью.

✅ Правильный подход:
- Используйте Promises вместо вложенных callback
- Используйте async/await для последовательных операций
- Обрабатывайте ошибки в одном месте (catch или try/catch)
- Разбивайте сложные цепочки на отдельные функции

❌ Избегайте:
- Вложенности callback глубже 2 уровней
- Анонимных функций в каждом callback (дайте им имена)
- Отсутствия обработки ошибок
- Смешивания callback и Promises в одном коде

Promises и async/await — современная замена callback!


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#NextJS
🚩 Почему обычный <noscript> тег не работает для критичных скриптов?

В Next.js для добавления скриптов, которые должны выполняться до рендера, используется компонент Script с атрибутом strategy. Обычные noscript теги в React не гарантируют порядок выполнения и могут блокировать рендеринг. Next.js Script оптимизирует загрузку скриптов и даёт контроль над их выполнением.

// Плохо - обычный noscript тег
export default function Page() {
    return (
        <div>
            <noscript src="/analytics.js"></noscript>
            {/* React игнорирует это, нет контроля над загрузкой */}
        </div>
    );
}

// Хорошо - Next.js Script компонент
import Script from 'next/noscript';

export default function Page() {
    return (
        <>
            {/* beforeInteractive - выполняется ДО гидратации */}
            <Script
                src="/critical-noscript.js"
                strategy="beforeInteractive"
            />
            
            {/* afterInteractive - после гидратации (по умолчанию) */}
            <Script
                src="/analytics.js"
                strategy="afterInteractive"
            />
            
            {/* lazyOnload - когда браузер свободен */}
            <Script
                src="/chat-widget.js"
                strategy="lazyOnload"
            />
        </>
    );
}

📎 Стратегии загрузки Script:

🟣 beforeInteractive — скрипт загружается и выполняется ДО гидратации React
🟣 afterInteractive — выполняется после гидратации (по умолчанию)
🟣 lazyOnload — загружается когда браузер простаивает
🟣 worker — выполняется в Web Worker (экспериментально)

beforeInteractive используется только в _document.js для критичных скриптов, которые нужны до интерактивности страницы. Это полифиллы, A/B тестирование, определение темы. Скрипт внедряется в HTML до любого Next.js кода и гарантированно выполняется первым.

afterInteractive (по умолчанию) подходит для большинства скриптов: аналитика, реклама, пиксели отслеживания. Они загружаются после того как страница стала интерактивной, не блокируя первоначальный рендеринг.

✅ Правильный подход:
- Используйте beforeInteractive только в _document.js для критичных скриптов
- afterInteractive для аналитики и сторонних сервисов
- lazyOnload для некритичных виджетов (чаты, соцсети)
- Inline скрипты через dangerouslySetInnerHTML внутри Script

❌ Избегайте:
- Обычных <noscript> тегов в компонентах React
- beforeInteractive в обычных страницах (только _document.js)
- Блокирующих скриптов без strategy
- Загрузки тяжёлых скриптов синхронно

Next.js Script оптимизирует производительность автоматически!


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

😎 Platform — реальный проект для прокачки фронтенда!

Это не демо и не учебный «туду-лист», а полноценная платформа с продуманной архитектурой и современным стеком: React, TypeScript, Redux Toolkit, React Hook Form, FSD.

Можно изучить каждую страницу, каждый компонент, посмотреть, как устроен код в боевом проекте, и забрать себе лучшие практики!

Оставляю ссылочку: GitHub 📱

➡️ Books Ready | #ресурс

#React
🚩 Почему в JavaScript файлах можно писать HTML-подобный код?

JSX (JavaScript XML) — это синтаксическое расширение JavaScript, которое позволяет писать HTML-подобную разметку внутри JavaScript кода. JSX не является валидным JavaScript и компилируется в обычные вызовы функций React.createElement(). Это делает код компонентов более читаемым и интуитивным.

// Плохо - React.createElement (так работает под капотом)
function Button() {
    return React.createElement(
        'button',
        { className: 'btn', onClick: handleClick },
        React.createElement('span', null, 'Click me'),
        React.createElement('span', null, '👆')
    );
}

// Хорошо - JSX (компилируется в код выше)
function Button() {
    return (
        <button className="btn" onClick={handleClick}>
            <span>Click me</span>
            <span>👆</span>
        </button>
    );
}

📎 Ключевые особенности JSX:

🟣 JSX компилируется в React.createElement() вызовы
🟣 Можно использовать JavaScript выражения в фигурных скобках {}
🟣 HTML атрибуты пишутся в camelCase (className, onClick)
🟣 JSX элементы могут быть присвоены переменным и возвращены из функций

JSX не является обязательным для React, но делает код значительно читаемее. Вместо вложенных вызовов функций вы видите привычную HTML-подобную структуру. Babel или другой транспайлер преобразует JSX в JavaScript до запуска кода.

В JSX можно вставлять любые JavaScript выражения внутри фигурных скобок: переменные, вызовы функций, тернарные операторы, map для списков. Это позволяет создавать динамические компоненты с условной логикой прямо в разметке.

✅ Правильный подход:
- Используйте JSX для всех React компонентов
- Оборачивайте многострочный JSX в круглые скобки ()
- Используйте {} для JavaScript выражений внутри JSX
- Помните что JSX возвращает один корневой элемент (или Fragment)

❌ Избегайте:
- Использования class вместо className
- Забывать закрывать теги (все теги должны быть закрыты)
- Вставлять JavaScript statements (if, for) напрямую в JSX
- Возвращать несколько корневых элементов без обёртки

JSX делает React код похожим на HTML, но это JavaScript!


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#React

🚩 Почему ваш компонент не видит обновления Props?

Props — это read-only канал от родителя к ребёнку. Главное: вы не можете их менять. Попытка мутировать Props приведёт к тому, что обновления не произойдут.

// Плохо - Props read-only
function UserCard(props) {
  props.name = "Bob"; // ❌ Не сработает!
  return <h1>{props.name}</h1>;
}

// Хорошо - Используйте callback
function UserCard({ name, onNameChange }) {
  return (
    <>
      <h1>{name}</h1>
      <button onClick={() => onNameChange("Bob")}>Change</button>
    </>
  );
}

📎 Основные проблемы:

🟣 Props read-only, но разработчики их мутируют
🟣 Передача всего объекта вместо деструктуризации
🟣 Забывают про dependency в useEffect при изменении props

Props — это контракт: родитель передаёт данные, ребёнок их использует, но не меняет. Если нужно обновить — вызови callback.

Пример:

function Button({ label = "Click", onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function Shop() {
  const [cart, setCart] = React.useState([]);
  const products = [{ id: 1, name: "Laptop", price: 1000 }];

  return (
    <div>
      {products.map(p => (
        <Button key={p.id} label="Add" onClick={() => setCart([...cart, p.name])} />
      ))}
      <p>Cart: {cart.length}</p>
    </div>
  );
}

✅ Props для:
- Передачи данных сверху вниз
- Callback функций для событий
- Конфигурации компонента
- Переиспользуемых компонентов

❌ Не делайте:
- Мутацию Props
- Props drilling (5+ уровней)
- Передачу целого объекта

Props — основа React!


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов