📌 Что такое редакс?

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

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

🤔 Основные концепции

1️⃣ Хранилище (store):

➕ Является объектом, который содержит все состояние приложения. В приложении может быть только одно хранилище.

2️⃣ Действия (actions):

➕ Действия — это объекты, которые отправляются в хранилище для изменения состояния. Они должны иметь тип (type), который описывает тип действия, и могут содержать дополнительные данные (payload).

3️⃣ Редюсеры (reducers):

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

4️⃣ Диспетчеры (dispatch):

➕ Отправляют действия в хранилище. Это единственный способ изменить состояние в Redux.

5️⃣ Подписки (subscriptions):

➕ Позволяют компонентам подписываться на изменения состояния в хранилище и реагировать на эти изменения.

🤔 Пример

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

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;

Создание хранилища (store)

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

const store = createStore(counterReducer);

export default store;

Подключение Redux к React

// 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')
);

Использование состояния и действий

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } 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>
    </div>
  );
};

export default App;

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

1️⃣ Централизованное управление состоянием:

➕ Все состояние приложения находится в одном месте, что упрощает управление и отладку.

2️⃣ Предсказуемость:

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

3️⃣ Легкость тестирования:

➕ Действия и редюсеры легко тестировать из-за их чистоты и изолированности.

4️⃣ Возможность временной петли (time travel):

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

Redux — это библиотека для управления состоянием приложений, предоставляющая централизованное хранилище для всех состояний. Основные концепции Redux включают хранилище (store), действия (actions), редюсеры (reducers), диспетчеры (dispatch) и подписки (subscriptions). Redux часто используется с React, но может быть применен и с другими библиотеками.

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

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

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

💬 Спрашивают в 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],
  },
};

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