👩‍💻 Подключение компонента с помощью connect

Хотя хуки являются современным способом работы с Redux, вы также можете использовать метод connect из библиотеки react-redux для подключения компонентов к Redux. Это более старый способ, но он по-прежнему широко используется и имеет свои преимущества.

// Компонент
const TodoList = ({ todos, addTodo, removeTodo }) => {
    // some logic
    return ();
};

// Определяем, какие данные из Redux store передать компоненту
const mapStateToProps = (state) => ({
    todos: state.todos.todos,
});

// Определяем, какие действия передать компоненту
const mapDispatchToProps = {
    addTodo,
    removeTodo,
};

// Подключаем компонент к Redux
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

Делаю сейчас курс по Redux + Redux Toolkit + RTK Query и вспомнил, как раньше подключались компоненты. Блин, выглядит круто. Может снова так делать.😅

Кто помнит? Олды есть?

#redux #react

👩‍💻 Принципы Redux

Redux основывается на нескольких ключевых принципах, которые помогают организовать и управлять состоянием приложения.

🔒 Единое хранилище (Single Source of Truth)

В Redux есть только одно общее хранилище, которое содержит все состояние приложения. Это облегчает управление состоянием и делает его предсказуемым.

Поскольку всё состояние хранится в одном месте, легче отследить изменения и управлять ими. Это позволяет избежать проблем с синхронизацией, которые могут возникнуть, если состояние хранится в разных местах.

const initialState = {
    todos: [],
    user: null,
};

// Всё состояние хранится в одном объекте
const state = {
    todos: ['Задача 1', 'Задача 2'],
    user: { name: 'Иван', age: 30 },
};

👀 Состояние только для чтения (Read-Only State)

Единственным способом изменения состояния является отправка действия (action). Это гарантирует, что изменения состояния происходят только через определенные точки (actions), что делает их предсказуемыми.

Когда состояние приложения меняется, это происходит только через отправку действий. Это делает все изменения явными и отслеживаемыми.

// Действие для добавления задачи
const addTodo = (text) => ({
    type: 'ADD_TODO',
    payload: text,
});

// Изменение состояния только через действие
store.dispatch(addTodo('Новая задача'));

✨ Чистые функции редюсеры (Pure Functions)

Редюсеры должны быть чистыми функциями. Это значит, что для одинаковых входных данных они всегда должны возвращать одинаковый результат, и они не должны изменять свои входные данные.

Чистые функции делают состояние предсказуемым и упрощают отладку. Они не имеют побочных эффектов и не влияют на внешние состояния.

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, action.payload],
            };
        default:
            return state; // Возвращаем новое состояние, не изменяя текущее
    }
};

⬇️ Однонаправленный поток данных (Unidirectional Data Flow)

Поток данных в Redux всегда односторонний. Это означает, что данные передаются от состояния к представлению, и изменения состояния происходят только через действия.

Однонаправленный поток данных упрощает понимание, как данные перемещаются в приложении. Он делает отладку проще, поскольку вы всегда знаете, откуда приходят данные и как они изменяются.

// Пример потока данных
const mapStateToProps = (state) => ({
    todos: state.todos,
});

// Компонент получает данные
const TodoList = ({ todos }) => (
    <ul>
        {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
        ))}
    </ul>
);

// Связываем компонент с Redux
export default connect(mapStateToProps)(TodoList);

#redux #frontend #react #flux

👨‍💻 План развития Frontend Разработчика (Часть 3)

Ты уже освоил базу: HTML, CSS, JavaScript. Но в реальности никто не пишет проекты на чистом коде — это долго, сложно и неэффективно. Если ты написал что-то на чистом JS без фреймворков, то, грубо говоря, ты создал свой фреймворк. Другим разработчикам будет тяжело разобраться в твоём коде, а поддержка такого проекта превратится в ад.

Решение? Готовые фреймворки и библиотеки. Они дают структуру, правила и экосистему, упрощают разработку и делают код предсказуемым.

Среди популярных вариантов — Vue, Angular, Svelte, Solid, но мы остановимся на React. Почему? Потому что он мощный, гибкий и востребованный на рынке. Давай разберёмся, как его правильно учить.

👩‍💻 React + Router (< 2 месяцев)

React — это основной инструмент, с которым ты будешь работать. Если ты можешь сделать ToDo App, то это уже похоже на коммерческий код. Чем рабочий код отличается от пет-проектов? Объёмом, структурой, абстракциями, обёртками, разделением на модули.

Когда ты делаешь простое приложение (например, Кинотеатр), ты уже сталкиваешься с реальными кейсами:
- Работа с API
- Отрисовка данных
- Поиск и фильтрация
- Роутинг
- Управление состоянием

Сложность не в написании какого-то "особенного" кода, а в масштабе. Нужно учиться ориентироваться в больших проектах, понимать чужой код и писать поддерживаемый свой.

Для изучения React я предлагаю максимально подготовить свой мозг и пройти 2 курса по React, повторяя за автором и делая конспект:

→ React - Курс по React для Начинающих
https://www.youtube.com/watch?v=is3T0W0ouT0

→ Курс React с нуля
https://youtu.be/am_UiIvha5M?si=7io3qRZITckfH2zA

Далее проходим более подробный курс с дотошным объяснением базы от Димыча:

→ Todolist React JS
https://www.youtube.com/watch?v=pzs3a-d3kjM

После этого приступаем к практике и делаем приложение новостей с основными фичами фронтенда: Поиск, Фильтрация, Пагинация, Слайдер и т.д. Тут также произойдёт первое знакомство с TypeScript, Redux, Router, FSD:

→ React Новости
https://youtu.be/bD0UXb7kD_k?si=e5Y5Jkiwt_66U5Ug

Далее углубляем свои знания и смотрим, как создают большое приложение Pizza:

→ React Pizza v2
https://youtu.be/_UywBskWJ7Q?si=WN2kX8Eck9BW_OD3

Ещё больше практики, чтобы уже тошнило, а мозг окончательно привык к React:

→ Разработай 6 проектов на ReactJS
https://youtu.be/eS0GL73tkmw?si=2G36Y4n-bYI4hnT1

Изучаем базу роутинга и применяем сразу на практике

→ React Router 6
https://youtu.be/0auS9DNTmzE?si=GGuidPN1NpfvVAiw

🖥 TypeScript (≤10 дней)

На самом деле ТС очень сложный. Даже опытные разработчики не умеют решать сложные задачи. Проходим 2 курса в YouTube:

→ Полный курс TypeScript
https://www.youtube.com/watch?v=V7hBejCH1HI

→ TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС
https://youtu.be/LWtHl__oEWc?si=E3MJHqHHMM68NblJ

Если за 10 дней не освоили базис — всё равно идём дальше. Остальное натренируется в проектах. Сложные темы: дженерики, утилити-типы, защитники типов, маппинг — вы не поймёте их, пока не начнёте практиковаться в полном стеке. Нам нужна база, которая покрывает 80% рабочей нагрузки.

👩‍💻 Redux + RTK (3-4 недели)

Тут так же как и в TypeScript. Redux имеет кучу инструментов. Но для того чтобы нам понять его - нужна практика. У многи новичков проблема с ним. Что нам нужно уметь: создавать слайсы, использовать данные в компонентах, использовать диспатч, делать запросы на сервер с санками или rtk query. Это база, которая уже позволит вам делать приложение. остальное изучаем уже на практике всего стека.

→ Полный курс Redux
https://www.youtube.com/watch?v=gPmYTqGPDWA

→ Redux Toolkit для управления
https://www.youtube.com/watch?v=C0fBnil_Im4

То же самое и с Redux. Хотя в нём много инструментов, главное — начать практиковаться. У многих новичков возникают сложности. Базовые навыки, которые нужно освоить: Создание слайсов, Использование данных в компонентах, Работа с диспатчем, Запросы к серверу (санки или RTK Query)

Этого достаточно для создания рабочих приложений. Остальное освоится в процессе работы с полным стеком.

#redux #roadmap #frontend #react #typescript