📌 Что делает веб пак?

💬 Спрашивают в 3% собеседований

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

🤔 Основные функции

1️⃣ Сборка модулей (Module Bundling)

:plu Webpack анализирует ваше приложение, начиная с одного или нескольких входных файлов (entry points), и строит граф зависимостей всех модулей, используемых в вашем приложении.

➕ Он объединяет эти модули в один или несколько выходных файлов (bundles), которые можно загрузить в браузер.

2️⃣ Обработка ресурсов (Asset Management)

➕ Webpack может обрабатывать различные типы файлов, такие как JavaScript, CSS, изображения и шрифты, используя загрузчики (loaders) и плагины (plugins).

➕ Загрузчики позволяют вам преобразовывать файлы перед включением их в сборку. Например, загрузка CSS, преобразование ES6+ кода в ES5 с использованием Babel, оптимизация изображений и т.д.

3️⃣ Оптимизация производительности (Performance Optimization)

➕ Webpack предлагает множество встроенных функций для оптимизации выходных файлов, включая минификацию JavaScript и CSS, разделение кода (code splitting), удаление неиспользуемого кода (tree shaking) и др.

4️⃣ Горячая перезагрузка (Hot Module Replacement)

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

🤔 Основные компоненты

1️⃣ Входные точки (Entry Points)

➕ Входные точки указывают Webpack, с какого файла или файлов начать построение графа зависимостей.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
};

2️⃣ Выходные точки (Output)

➕ Выходные точки определяют, где Webpack должен сохранить сгенерированные файлы и как их называть.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

3️⃣ Загрузчики (Loaders)

➕ Загрузчики используются для обработки различных типов файлов. Они позволяют вам преобразовывать файлы перед их включением в сборку.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

Webpack — это инструмент для сборки модулей, который объединяет и оптимизирует различные ресурсы приложения (JavaScript, CSS, изображения и т.д.) в один или несколько файлов для загрузки в браузер. Он использует входные точки (entry points), выходные точки (output), загрузчики (loaders) и плагины (plugins) для управления процессом сборки и обеспечения оптимальной производительности.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Почему нельзя отдать строку в дом?

Передача строки непосредственно в DOM (Document Object Model) может привести к различным проблемам, связанным с безопасностью и корректностью рендеринга. Рассмотрим более подробно, почему это не рекомендуется.

🤔 Проблемы с безопасностью

1️⃣ XSS-атаки (Cross-Site Scripting):

➕ Если строка содержит пользовательский ввод или динамически полученные данные, она может включать вредоносный код. Например, злоумышленник может вставить <script> тег, который будет выполнен браузером и может украсть данные пользователей или выполнить другие вредоносные действия.

const userInput = "<img src='x' onerror='alert(\"XSS Attack\")'>";
document.getElementById('output').innerHTML = userInput;

🤔 Проблемы с корректностью рендеринга

2️⃣ Неправильный рендеринг HTML:

➕ Строка, содержащая HTML-код, может быть неправильно интерпретирована или отрендерена браузером. Это может привести к некорректному отображению страницы или нарушению её структуры.

const invalidHTML = "<div>Unclosed tag";
document.getElementById('output').innerHTML = invalidHTML;
// Это может привести к неправильному отображению содержимого.

🤔 Как безопасно работать с динамическим контентом

1️⃣ Использование методов DOM API:

➕ Вместо передачи строк, рекомендуется использовать методы DOM API, такие как createElement, appendChild, textContent и другие. Эти методы позволяют безопасно добавлять элементы и текст в DOM.

const userInput = "Safe text";
const outputElement = document.getElementById('output');
const textNode = document.createTextNode(userInput);
outputElement.appendChild(textNode);

2️⃣ Экранирование данных:

➕ Если необходимо вставить HTML-код из строки, можно использовать методы, которые экранируют потенциально опасные символы.

const userInput = "<div>Safe content</div>";
const outputElement = document.getElementById('output');
outputElement.textContent = userInput;
// Использование textContent гарантирует безопасное добавление текста.

🤔 Примеры

1️⃣ Добавление текстового контента:

const userInput = "Some user-provided text";
const outputElement = document.getElementById('output');
outputElement.textContent = userInput;

2️⃣ Создание и добавление элементов:

const userInput = "Some user-provided text";
const outputElement = document.getElementById('output');
const paragraph = document.createElement('p');
paragraph.textContent = userInput;
outputElement.appendChild(paragraph);

Передача строки напрямую может быть небезопасной и привести к XSS-атакам и некорректному рендерингу. Вместо этого рекомендуется использовать методы DOM API, такие как createElement, appendChild, и textContent, для безопасного и правильного добавления элементов и текста.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 В чем отличие между серверным рендерингом и спа?

💬 Спрашивают в 3% собеседований

Серверный рендеринг (Server-Side Rendering, SSR) и одностраничные приложения (Single Page Applications, SPA) — это два различных подхода к созданию веб-приложений, каждый из которых имеет свои преимущества и недостатки. Рассмотрим их основные отличия.

🤔 Серверный рендеринг (SSR)

➕ При нем весь HTML-код страницы генерируется на сервере и отправляется в браузер в готовом виде.

➕ Сервер получает запрос от клиента, обрабатывает его, собирает необходимые данные, рендерит HTML и отправляет его обратно клиенту.

🤔 Преимущества:

1️⃣ Улучшение SEO:

➕ Поисковые системы получают полностью отрендеренную HTML-страницу, что облегчает индексацию контента.

2️⃣ Быстрый первый рендер (Time to First Paint):

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

3️⃣ Совместимость с более старыми браузерами:

➕ Серверный рендеринг не требует от клиента выполнения сложного JavaScript-кода.

🤔 Недостатки:

1️⃣ Нагрузка на сервер:

➕ Сервер должен обрабатывать каждый запрос и рендерить HTML, что может увеличить нагрузку на сервер при большом количестве запросов.

2️⃣ Медленное взаимодействие после первого рендера:

➕ Каждое взаимодействие с приложением может потребовать полного обновления страницы, что делает взаимодействие медленнее и менее плавным.

🤔 Пример:

➕ Next.js для React.

🤔 Одностраничные приложения (SPA)

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

➕ Обновляют контент динамически без перезагрузки всей страницы.

🤔 Преимущества:

1️⃣ Быстрое взаимодействие после первой загрузки:

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

2️⃣ Лучшая пользовательская опыта (UX):

➕ Плавные переходы и обновления контента без перезагрузки страницы.

3️⃣ Реактивное взаимодействие:

➕ Возможность реализации сложных пользовательских интерфейсов с высоким уровнем интерактивности.

🤔 Недостатки:

1️⃣ SEO-проблемы:

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

2️⃣ Долгое время первой загрузки (Initial Load Time):

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

3️⃣ Совместимость с браузерами:

➕ Требует современных браузеров и может не работать в старых или менее популярных браузерах без полифиллов.

🤔 Пример:

➕ React с использованием React Router для маршрутизации.

➕ Vue.js с использованием Vue Router.

➕ Angular.

🤔 Гибридные подходы

Некоторые современные фреймворки поддерживают гибридный подход, совмещая преимущества SSR и SPA. Например, Next.js для React позволяет рендерить начальную загрузку на сервере для улучшения SEO и времени до первого рендера, а затем переключаться на SPA для интерактивных взаимодействий.

SSR с Next.js (React):

// pages/index.js
import React from 'react';

const HomePage = ({ data }) => (
  <div>
    <h1>Home Page</h1>
    <p>{data}</p>
  </div>
);

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

export default HomePage;

➕ Серверный рендеринг (SSR): Генерирует HTML на сервере и отправляет его в браузер. Обеспечивает лучшее SEO и более быстрый первый рендер, но может увеличить нагрузку на сервер и иметь более медленное взаимодействие после первого рендера.

➕ Одностраничные приложения (SPA): Загружают и выполняют весь JavaScript на клиенте, обеспечивая быстрые и плавные взаимодействия после начальной загрузки, но могут иметь проблемы с SEO и более долгое время первой загрузки.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

🤔 Чем отличаются const и let?

В разных языках программирования есть разные ключевые слова для объявления переменных. Два таких ключевых слова — const и let — широко используются. Рассмотрим различия между ними в контексте JavaScript.

🚩const

Константные значения:
🟠Используется для объявления переменных, которые не могут быть переназначены после их инициализации.
🟠Это не означает, что значения неизменны, если переменная указывает на изменяемый объект (например, массив или объект), вы можете изменять содержимое этого объекта.

Инициализация: Переменная, объявленная с const, должна быть инициализирована сразу же при объявлении.

Область видимости: Имеет блочную область видимости, то есть видна только внутри блока {}, в котором объявлена.

const a = 10;
a = 20; // Ошибка: Assignment to constant variable.
const obj = { name: "John" };
obj.name = "Jane"; // Допустимо: изменяемое свойство объекта
console.log(obj.name); // "Jane"

🚩let

Переменные, которые можно переназначить: Используется для объявления переменных, которые могут быть переназначены позже в коде.

Инициализация: Переменная, объявленная с let, не обязательно должна быть инициализирована при объявлении.

Область видимости: Также имеет блочную область видимости.

let b;
b = 10;
b = 20; // Допустимо: значение переменной изменено
console.log(b); // 20
if (true) {
  let c = 30;
  console.log(c); // 30
}
console.log(c); // Ошибка: c is not defined

🚩Основные различия

Переназначение:
🟠const: Не позволяет переназначать переменную после ее инициализации.
🟠let: Позволяет переназначать переменную.

Инициализация:
🟠const: Требует обязательной инициализации при объявлении.
🟠let: Не требует обязательной инициализации при объявлении.

Область видимости: Оба имеют блочную область видимости.

🚩Когда их использовать
🟠Используйте const для переменных, которые не должны изменяться после их инициализации. Это делает код более предсказуемым и снижает вероятность ошибок.
🟠Используйте let для переменных, которые могут изменяться в процессе выполнения программы.

Использование const для неизменяемых переменных:

const pi = 3.14;
const maxItems = 100;

Использование let для переменных, значение которых будет изменяться:

let count = 0;
count++;
console.log(count); // 1

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

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что будет если передать функцию по ссылке?

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

Определение функции: Вы создаете функцию и сохраняете ее в переменной или объявляете ее прямо в качестве аргумента.

function greet(name) {
  return `Hello, ${name}!`;
}

Передача функции по ссылке: Вы передаете функцию как аргумент другой функции или сохраняете ее в другой переменной.

function executeFunction(fn, arg) {
  return fn(arg);
}

const result = executeFunction(greet, 'Alice');
console.log(result); // "Hello, Alice!"

В этом примере функция greet передается по ссылке в функцию executeFunction, которая затем вызывает greet с аргументом Alice.

🚩В чем преимущества и возможности передачи

🟠Повторное использование кода: Вы можете передавать функции по ссылке и использовать их в разных частях программы, что позволяет избегать дублирования кода.
🟠Функции высшего порядка: Принимают другие функции в качестве аргументов или возвращают функции, называются функциями высшего порядка. Это позволяет создавать более абстрактные и гибкие функции.

function add(x) {
  return function(y) {
    return x + y;
  };
}

const addFive = add(5);
console.log(addFive(3)); // 8

🟠Коллбеки: Это функции, которые передаются как аргументы другим функциям и вызываются позже. Это особенно полезно в асинхронных операциях, таких как обработка событий или запросы к серверу.

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'Alice' };
    callback(data);
  }, 1000);
}

function handleData(data) {
  console.log(`Received data: ${data.name}`);
}

fetchData(handleData);

🟠Методы массивов: Многие методы массивов, такие как map, filter, reduce, принимают функции в качестве аргументов для обработки элементов массива.

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

🚩Важные моменты

🟠Контекст выполнения (this): При передаче функции по ссылке важно помнить, что контекст выполнения (this) может измениться. Это особенно актуально для методов объектов.

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const greet = person.greet;
greet(); // undefined, так как контекст потерян

const boundGreet = person.greet.bind(person);
boundGreet(); // Hello, Alice

🟠Замыкания: Передача функции по ссылке позволяет использовать замыкания, где внутренняя функция имеет доступ к переменным внешней функции, даже после того, как внешняя функция завершила выполнение.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое frontend?

Frontend — это термин, используемый для описания части веб-приложений и веб-сайтов, с которой взаимодействует пользователь. Это видимая и интерактивная часть приложения, отображаемая в браузере. Frontend включает в себя структуру, дизайн и поведение веб-страниц.

🚩Основные компоненты

🟠HTML (HyperText Markup Language): Отвечает за структуру и содержимое веб-страницы. Это базовый язык разметки, который используется для создания и организации элементов на странице, таких как заголовки, абзацы, изображения, ссылки и формы.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Пример страницы</title>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <p>Это пример абзаца текста.</p>
</body>
</html>

🟠CSS (Cascading Style Sheets): Отвечает за стилизацию веб-страницы. С его помощью можно управлять внешним видом элементов, включая цвета, шрифты, отступы, размеры и расположение. CSS помогает сделать страницы визуально привлекательными и улучшить пользовательский опыт.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    padding: 10px;
}

🚩Фреймворки и библиотеки

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

🟠React: Разработанный Facebook, это библиотека для создания пользовательских интерфейсов. React позволяет создавать компоненты — переиспользуемые части интерфейса, которые упрощают разработку и поддержку кода.

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    return (
        <div>
            <h1>Привет, мир!</h1>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

🟠Angular: Разработанный Google, это платформа и фреймворк для создания динамичных веб-приложений. Angular предлагает мощные инструменты для управления данными, маршрутизации и разработки сложных приложений.

🚩Инструменты

🟠Webpack: Webpack — это инструмент для сборки модулей, который объединяет различные ресурсы (JavaScript, CSS, изображения) в один или несколько файлов для улучшения производительности и управления зависимостями.
🟠Babel: Babel — это транспайлер, который позволяет использовать современные возможности JavaScript в старых браузерах, преобразуя код в совместимый формат.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Откуда взялся CSS?

CSS (Cascading Style Sheets) появился в середине 1990-х годов как стандарт для описания внешнего вида и форматирования веб-страниц. Разработка CSS началась как ответ на необходимость разделения содержимого веб-страниц и их оформления, что улучшило бы управляемость и поддерживаемость веб-контента. Рассмотрим подробнее историю и развитие CSS.

🚩История появления

Ранние годы веб-разработки (1991-1994):
🟠В начале 1990-х годов, когда был изобретен HTML (Tim Berners-Lee в 1991 году), веб-страницы были в основном текстовыми документами с гиперссылками. Внешний вид и форматирование определялись в основном с помощью встроенных элементов HTML, таких как <b>, <i>, <font> и другие.
🟠Эти элементы позволяли контролировать только базовые стили и оформление, и не было эффективного способа централизованного управления стилями для всего веб-сайта.

Необходимость стандартизации (1994-1996):
🟠С увеличением популярности веба и усложнением веб-страниц, стало ясно, что необходимо разработать стандарт для описания стилей, который позволил бы разделить структуру (HTML) и оформление (стили).
🟠В 1994 году Хокон Виум Ли (Håkon Wium Lie), работавший в CERN (Европейская организация по ядерным исследованиям), предложил концепцию каскадных таблиц стилей (Cascading Style Sheets). Он представил свой проект Тиму Бернерсу-Ли и сообществу разработчиков веб-стандартов.

Создание стандарта CSS (1996):
🟠В 1996 году W3C (World Wide Web Consortium), организация, занимающаяся разработкой и продвижением веб-стандартов, опубликовала первую спецификацию CSS, известную как CSS1.
🟠CSS1 определял основные стили для текста, шрифтов, цветов и элементов интерфейса, таких как отступы и границы.

Развитие CSS (1998 - настоящее время):
🟠В 1998 году была опубликована спецификация CSS2, которая добавила новые возможности, такие как позиционирование элементов, z-index, стили для различных медиа-типов (например, печать) и улучшенная поддержка таблиц.
🟠CSS3, разработка которого началась в начале 2000-х, был разделен на модули, что позволило быстрее и гибче разрабатывать и внедрять новые возможности. CSS3 включает в себя десятки модулей, таких как Flexbox, Grid, анимации, трансформации, градиенты и многое другое.

🚩Важные вехи

CSS1 (1996):
🟠Основные стили для текста и элементов интерфейса.
🟠Поддержка шрифтов, цветов, отступов и границ.

CSS2 (1998):
🟠Позиционирование элементов и z-index.
🟠Стили для различных медиа-типов.
🟠Улучшенная поддержка таблиц и других элементов.

CSS3 (начало 2000-х):
🟠Модульная структура спецификации.
🟠Новые возможности, такие как Flexbox, Grid, анимации, трансформации и градиенты.

В CSS4 (официальной спецификации CSS4 как таковой нет, но многие новые возможности продолжают разрабатываться в рамках модулей CSS3) включены современные инструменты для веб-разработки, такие как переменные (CSS Custom Properties), сложные селекторы, улучшенная типографика и адаптивный дизайн.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Заголовок страницы</h1>
    </header>
    <main>
        <p>Это пример абзаца текста.</p>
    </main>
    <footer>
        <p>&copy; 2024 Все права защищены.</p>
    </footer>
</body>
</html>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие преимущества Redux?

Redux — это библиотека для управления состоянием приложений, часто используемая с React, но она также может быть использована с другими библиотеками или фреймворками JavaScript. Redux предлагает централизованное хранилище (store) для состояния приложения, что делает управление состоянием более предсказуемым и удобным. Рассмотрим основные преимущества использования Redux:

🚩Преимущества

🟠Централизованное управление состоянием: Все состояние приложения хранится в одном централизованном месте, называемом хранилищем (store). Это упрощает управление состоянием и его доступность из любой части приложения.

🟠Предсказуемость и детерминизм: Redux использует чистые функции (редюсеры) для обработки изменений состояния. Это делает поведение приложения предсказуемым и детерминированным.

🟠Легкость отладки: Redux предоставляет мощные инструменты для отладки, такие как Redux DevTools, которые позволяют разработчикам просматривать состояние приложения, действия и изменения состояния в реальном времени.

🟠Тестируемость: Благодаря использованию чистых функций и явных действий, компоненты состояния и логика изменения состояния в Redux легко тестируются.

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

🟠Управление сложными состояниями: Redux позволяет эффективно управлять сложными состояниями, включая вложенные структуры данных и зависимости между различными частями состояния.

🟠Совместимость с серверным рендерингом (SSR): Redux хорошо подходит для серверного рендеринга, так как состояние приложения может быть предварительно заполнено на сервере и передано клиенту для инициализации.

Для начала установим необходимые пакеты:

npm install redux react-redux

Создание действий (actions)

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

Создание редюсера (reducer)

// reducer.js
const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

export default counterReducer;

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие правила у работы redux ?

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

🚩Основные принципы

🟠Единый источник правды
Все состояние приложения хранится в одном объекте хранилища (store). Это обеспечивает централизованное управление состоянием, что упрощает отладку и тестирование. В приложении должно быть только одно хранилище.

import { createStore } from 'redux';
   import rootReducer from './reducers';

   const store = createStore(rootReducer);   

🟠Состояние доступно только для чтения
Единственный способ изменить состояние — это отправить действие (action), описывающее изменение. Действия — это простые объекты, которые имеют свойство type и, возможно, дополнительные данные. Изменения состояния должны происходить только через действия.

const increment = () => ({
     type: 'INCREMENT',
   });

   store.dispatch(increment());

🟠Изменения состояния происходят с помощью чистых функций
Для описания того, как действия изменяют состояние, используются редюсеры (reducers). Редюсеры — это чистые функции, которые принимают предыдущее состояние и действие в качестве аргументов и возвращают новое состояние. Редюсеры должны быть чистыми функциями и не должны иметь побочных эффектов.

const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

const store = createStore(counterReducer);
   

🚩Дополнительные правила и рекомендации

🟠Избегайте мутаций состояния:
Состояние в Redux должно быть неизменяемым. Вместо изменения текущего состояния, редюсеры должны возвращать новые объекты состояния. Используйте методы, которые не изменяют исходные объекты, такие как Array.prototype.map, Array.prototype.filter, и оператор распространения (spread operator) для создания новых объектов и массивов.

const newState = {
  ...state,
  count: state.count + 1,
};

🟠Используйте сериализуемые действия и состояния
Для упрощения отладки и поддержки инструментов разработки (например, Redux DevTools), действия и состояния должны быть сериализуемыми (не содержать циклических ссылок и неподдерживаемых типов данных, таких как функции или символы).

const action = {
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux',
  },
};

🟠Используйте нормализованные состояния: Храните состояния в нормализованной форме, чтобы избежать избыточности данных и упростить управление состояниями. Например, используйте объекты, где ключами являются идентификаторы, а значениями — данные.

const initialState = {
  todos: {
    byId: {
      1: { id: 1, text: 'Learn Redux' },
      2: { id: 2, text: 'Build an app' },
    },
    allIds: [1, 2],
  },
};

Ставь 👍 и забирай 📚 Базу знаний

🤔Что нужно сделать, чтобы поменять данные в хранилище redux ?

Чтобы изменить данные, нужно выполнить несколько шагов: создать действие (action), определить редюсер (reducer), который будет обрабатывать это действие и обновлять состояние, и затем отправить действие (dispatch action) в хранилище. Рассмотрим эти шаги более подробно.

🚩Шаги для изменения данных в хранилище

🟠Создание действия (action)
Это объект, который описывает, что должно произойти. Он должен содержать как минимум свойство type, которое указывает на тип действия. Дополнительно можно добавить любые данные, которые нужны для обновления состояния.

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

export const setValue = (value) => ({
  type: 'SET_VALUE',
  payload: value,
});

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

// reducer.js
const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    case 'SET_VALUE':
      return {
        ...state,
        count: action.payload,
      };
    default:
      return state;
  }
};

export default counterReducer;

🟠Создание хранилища (store): Создается с использованием функции createStore из библиотеки Redux. Хранилище объединяет редюсеры и обеспечивает централизованное управление состоянием.

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

🟠Подключение Redux к React (или другому фреймворку): Нужно подключить его через провайдер (Provider), который делает хранилище доступным для всех компонентов в дереве компонентов.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

🟠Использование состояния и отправка действий в компонентах: Для получения состояния из хранилища и отправки действий используются хуки useSelector и useDispatch из библиотеки react-redux.

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, setValue } from './actions';

const App = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(setValue(10))}>Set to 10</button>
    </div>
  );
};

export default App;

Ставь 👍 и забирай 📚 Базу знаний