👩‍💻 Принципы 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

⛔️ Топ причин, по которым могут уволить во время испытательного срока

В YeaHub работают новички, и я замечаю одни и те же ошибки, которые, если и не критичны, то точно неприятны. Повторение их может привести к тому, что с человеком просто попрощаются на испытательном сроке. В основном проблемы связаны с тем, что ребята не проверяют свой код перед отправкой, не тестируют его и не вникают в бизнес-требования.

На пет-проектах многие привыкают работать без четких стандартов: если текст не выровняли, то "потом как-нибудь". Ведь заказчика нет, никто не будет настаивать на исправлениях. Но это не норма. В продакшн-разработке у вас есть макет, и вы обязаны реализовать его точно до пикселя.

1. Невнимательность к качеству верстки
Представьте, что вы — мидл-разработчик в компании с зарплатой 200к. Если на проверку вы отправите верстку, не соответствующую макету, вас не только неоднократно отправят на доработку, но и запомнят как ненадежного сотрудника. Поверьте, никто не захочет тратить дни на тестирование вашего кода, если вы каждый раз правите только одно замечание, а следом появляются новые. Это загружает тестировщика, который гоняет вас с правками 4-5 дней, и раздражает коллег, вынужденных ревьюить один и тот же код снова и снова.

💡 Что делать:
- Проверяйте верстку на соответствие макету с помощью Pixel Perfect.
- Старайтесь устранять все замечания разом, чтобы не засыпать коллег бессмысленными коммитами.

2. Отправка неаккуратных Pull Request
Задача — отправлять чистый, аккуратный коммит с минимальным количеством файлов и изменений. Если в файле не было задачи или необходимости в правках, не вносите туда изменения, даже если это просто пробел, кавычка или отступ. Изменение структуры, не связанной с задачей, отвлекает и создает беспорядок в истории проекта.

💡 Что делать:
- Добавляйте в PR только те файлы, которые реально были затронуты задачей.
- Не меняйте стили и форматирование файлов, если это не связано с вашей задачей.

3. Отправка нерабочей функциональности
Если вы сделали кнопку для открытия меню, убедитесь, что меню действительно открывается. Когда тестировщик запускает ваше приложение и видит, что оно не работает, это считается серьезной ошибкой. Подобные ошибки сразу попадают в "черный список". Ошибки функциональности — это прямой показатель недоработки перед сдачей.

💡 Что делать:
- Тестируйте каждую функцию локально перед отправкой на ревью.
- Проверяйте на разных разрешениях экрана и в разных браузерах, чтобы избежать багов.

4. Игнорирование пограничных случаев
Ваш код должен обрабатывать все возможные случаи, в том числе и пограничные. Например, пустые данные, необычные пользовательские вводы, нестандартные разрешения экранов. Это позволяет избежать "неожиданных" ошибок на продакшене и сохранить положительную репутацию кода.

💡 Что делать:
- Обдумайте все сценарии, в которых может использоваться функциональность, и протестируйте их.
- Чаще перезагружайте страницу, чтобы понять, возникнет ли ошибка, если данные придут пустыми, или нужного поля не будет

❗️ Следите за тем, что вы даете на проверку!

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

Учитесь работать над ошибками и доводить каждую задачу до идеала.

#frontend #work

🖥 Логика Дженериков в TypeScript: Generics, Extends и Conditional Types

В этом видео рассмотрена одна из ключевых тем в TypeScript — Дженерики (Generics). Вы узнаете, как использовать дженерики для создания универсального и переиспользуемого кода.

Мы подробно разберем:
- Примеры работы с дженериками на функциях, классах, интерфейсах, типах, компонентах и хуках.
- Условные типы (conditional types) и ограничения через extends.
- Логику использования дженериков, чтобы вы могли применять их эффективно и уверенно.

Дженерики — это основа современного программирования в TypeScript, позволяющая писать чистый, безопасный и гибкий код. Умение работать с дженериками помогает создавать сложные и масштабируемые проекты.

После просмотра этого видео вы сможете:
- Разрабатывать универсальные функции и компоненты.
- Переиспользовать код без потери строгой типизации.
- Понимать сложные структуры и писать более читаемый и надежный код.

Этот курс подходит для всех, кто хочет углубить свои знания в TypeScript и научиться писать действительно крутой код.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#typescript #frontend #generics #дженерики

🖥 Задания для закрепления Дженериков в TypeScript.

Посмотрите видео -> Выполните задания самостоятельно.

Задание 1
Создайте функцию createArray с использованием дженериков. Функция должна принимать два аргумента:
- Тип элемента T,
- Количество элементов length — число, указывающее количество элементов в массиве.

Функция должна возвращать массив из указанного числа элементов типа T. Все элементы массива должны быть равными null.

Напишите тесты для функции:
- Проверьте, что она корректно создаёт массивы для различных типов (`number`, string, `boolean`).
- Проверьте, что длина массива соответствует указанному числу length.

function createArray(length: any): any {
  // Реализуйте функцию
}

// Пример теста
const numberArray = createArray(3); // Ожидается: [null, null, null]
const stringArray = createArray(2); // Ожидается: [null, null]

Задание 2
Создайте дженерик Box<T> для упаковки значений. Функция должна принимать значение типа T и возвращать объект с этим значением в свойстве value.

Напишите функцию getBoxValue(box) для извлечения значения из упакованного объекта. Функция должна:
- Возвращать значение из объекта,
- Выбрасывать ошибку, если тип T не соответствует ожидаемому.

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

type Box = {
   // Реализуйте дженерик
};

function getBoxValue(box: any): any {
  // Реализуйте функцию
}

// Пример теста
const stringBox = { value: 'Hello' };
const extractedValue = getBoxValue(stringBox); // Ожидается: 'Hello'

Задание 3
Используйте дженерики для создания функции mergeArrays<T>(arr1, arr2), которая сливает два массива в один.

Функция должна принимать два массива типа T[] и возвращать новый массив, который содержит все элементы из обоих массивов.

Напишите тесты для функции:
- Проверьте, что она корректно сливает массивы для различных типов (`number`, `string`).
- Проверьте, что она сохраняет правильный тип массива.

function mergeArrays(arr1: any, arr2: any): any {
  // Реализуйте функцию
}

// Пример теста
const mergedNumbers = mergeArrays([1, 2], [3, 4]); // Ожидается: [1, 2, 3, 4]
const mergedStrings = mergeArrays(['a', 'b'], ['c', 'd']); // Ожидается: ['a', 'b', 'c', 'd']

#typescript #frontend #generics #дженерики

🖥 5 главных правил THIS для Frontend собеседований

В этом видео мы разберем 5 главных правил использования this в JavaScript, которые помогут вам не запутаться и успешно пройти собеседование на фронтенд-разработчика!

- Как работает this в стрелочных функциях.
- Почему важно, как вызывается функция, а не где она создается.
- Как this ведет себя в методах объектов.
- Как режим выполнения (strict или нестрогий) влияет на значение this.
- Как управлять this с помощью методов bind, call и apply.

🔗 СХЕМА-ШПАРГАЛКА ИЗ ВИДЕО

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#this #frontend #javascript

🖥 Практика This

Каким будет вывод этого фрагмента кода?

function f() {
    this.x = 5;
    console.log(this);
}
var o = new f();
console.log(o.x); 

Каким будет вывод этого фрагмента кода?

var o = {
    f: function() {
        return this;
    }
}
console.log(o.f())

Каким будет вывод этого фрагмента кода?

var o = {
    f: function() {
        return this;
    }
}
var o2 = {f: o.f};
console.log(o.f());
console.log(o2.f())

Каким будет вывод этого фрагмента кода?

function f() {
  console.log( this );
}

let user = {
  g: f.bind(null)
};

user.g();

Каким будет вывод этого фрагмента кода?

function sayHi() {
  alert( this.name );
}
sayHi.test = 5;

let bound = sayHi.bind({
  name: "Вася"
});

alert( bound.test );

#this #frontend #javascript

🖥 5 типичных задач по TypeScript для Frontend собеседований

В этом видео мы разберем 5 типичных задач по TypeScript, которые могут встретиться на собеседовании на фронтенд-разработчика!

- Типизация функций
- Дженерики (Generics)
- Extends, keyof, typeof
- Утилитарные типы (Utility Types)
- Маппинг типов (Mapped Types)

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #typescript

👩‍💻 5 продвинутых паттернов в React

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

- Slot Pattern (Component Injection)
- Render Prop
- Proxy Component
- Function as a Child
- Compound Components

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #react #patterns

🖥 5 сложных концепций Функций в JavaScript для собеседований

Одна из самых важных тем в JavaScript - это функции. Без них трудно создать даже простое приложение. Мы используем их для обработки событий, логики и асинхронных операций. С помощью функций мы пишем переиспользуемый и чистый код

Все концепции которые мы рассмотрим в этом видео спрашивают на собеседованиях

- Колбеки (Callbacks)
- Замыкания (Closures)
- Чистые функции (Pure Functions)
- this в функциях
- Асинхронные функции (async/await)

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #javascript #функции

👩‍💻 Принципы SOLID в React

Принципы SOLID помогают строить приложения, которые проще развивать и поддерживать в долгосрочной перспективе. Они помогают выстроить архитектуру с учетом будущих расширений и изменений. Изучив эти принципы, вы научитесь думать на шаг вперед, проектируя гибкие и масштабируемые системы.

- Single Responsibility Principle (Принцип единственной ответственности)
- Open/Closed Principle (Принцип открытости/закрытости)
- Liskov Substitution Principle (Принцип Барбары Лисков)
- Interface Segregation Principle (Принцип разделения интерфейса)
- Dependency Inversion Principle (Принцип инверсии зависимостей)

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

🔗 Репозиторий

#react #solid #frontend