#redux #normalization
Как реализуется нормализация данных в Redux Toolkit?

Уровень: 8️⃣

Нормализация данных в Redux Toolkit реализуется с использованием утилиты createEntityAdapter, которая помогает структурировать и управлять данными в нормализованном формате.

Ресурсы для изучения:
📔 Дока
📄 Статья
📱 YouTube

#react #redux
Для чего используются createAsyncThunk в Redux Toolkit?

Уровень: 6️⃣

createAsyncThunk из Redux Toolkit используется для обработки асинхронных операций (например, запросов к API) внутри Redux. Это позволяет автоматически управлять состояниями запроса (pending, fulfilled, rejected) и упрощает работу с асинхронными действиями.


Ресурсы для изучения:
📔Дока
📱YouTube - отличный плейлист от Михаила Непомнящего, где он последовательно разбирает Redux

#redux
Что такое Optimistic Update в RTK Query?

Уровень: 8️⃣

Optimistic update (оптимистичное обновление) — это метод обновления пользовательского интерфейса (UI), при котором изменения отображаются немедленно и ещё до того, как сервер подтвердит успешное выполнение операции. Это делает интерфейс более отзывчивым. В случае неудачи на сервере изменения откатываются к предыдущему состоянию.

Ресурсы для изучения:
📔Дока
📄Статья
📱YouTube

#tech #redux
Давайте разберемся в Redux Toolkit: какова роль actions, reducer и store?

Уровень: 7️⃣

- Actions — создаются на основе `slice` и позволяют описывать изменения состояния.
- Reducer — определяются в рамках `slice` и автоматически связываются с соответствующими действиями. Они обрабатывают изменения состояния.
- Store — создается с помощью функции `configureStore`, которая автоматически настраивает Redux DevTools и middleware, обеспечивая простоту конфигурации и управление состоянием.

📔Дока
📱YouTube

#basic #redux
Что такое middleware?

Уровень: 6️⃣

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

Ресурсы для изучения:
📄 Статья
📱 YouTube

#react #redux

#️⃣Как использовать createSlice и какие преимущества он предоставляет?

CreateSlice — это функция из Redux Toolkit, которая упрощает создание редьюсеров и действий для работы с состоянием. Обычно в Redux нужно было вручную создавать действия (action types) и редьюсеры, что приводило к большому количеству шаблонного кода. createSlice устраняет эту проблему, позволяя описывать редьюсер и действия в одном месте.


Как использовать createSlice:

В createSlice передается объект с несколькими ключами:
- name: имя среза состояния, которое будет использоваться для генерации префикса типов действий.
- initialState: начальное состояние.
- reducers: объект с функциями-редьюсерами, которые обновляют состояние.

Пример createSlice:

import { createSlice } from '@reduxjs/toolkit';

const todosSlice = createSlice({
  name: 'todos',
  initialState: [], // начальное состояние (пустой список задач)
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload); // добавление задачи
    },
    removeTodo: (state, action) => {
      return state.filter(todo => todo.id !== action.payload); // удаление задачи
    }
  }
});

// Автоматически сгенерированные действия
export const { addTodo, removeTodo } = todosSlice.actions;

// Редьюсер
export default todosSlice.reducer;

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

- Упрощенное код: createSlice объединяет создание редьюсеров и действий в одном месте.
- Автоматическое создание действий: Для каждого редьюсера автоматически создаются соответствующие действия (например, addTodo).
- Устранение повторяющегося кода и лучшая структура.
- Встроенная поддержка иммутабельности: используется библиотека Immer, которая позволяет изменять состояние "мутации", но фактически оно остается неизменным.

Пример использования:

import { configureStore } from '@reduxjs/toolkit';
import todosReducer from './todosSlice';

const store = configureStore({
  reducer: {
    todos: todosReducer
  }
});

🟰 Таким образом, createSlice значительно упрощает разработку, улучшает читаемость кода и ускоряет процесс разработки, избавляя от необходимости вручную прописывать типы действий и редьюсеры.

Ресурсы для изучения:
📔 Дока
📱 Видео

👉 Новости 👉 Платформа

#redux

👩‍💻 Какие ключевые принципы Redux?


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

Всё состояние приложения хранится в одном объекте, называемом store. Это упрощает отладку, так как все данные находятся в одном месте. Например:

const store = {
  user: { name: 'Alice', loggedIn: true },
  cart: [{ id: 1, name: 'Item A', quantity: 2 }]
};

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

Состояние нельзя изменять напрямую. Вместо этого создаются действия (actions), которые описывают изменения. Это делает изменения предсказуемыми и легко отслеживаемыми. Например:

const action = { type: 'ADD_ITEM', payload: { id: 2, name: 'Item B' } };

✅ Изменения через чистые функции (Changes are Made with Pure Functions):

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

function cartReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.payload];
    default:
      return state;
  }
}

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

Ресурсы для изучения:

📖 Дока

📹 Видео

💬 Новости

🎓 Платформа

#redux

Каково значение неизменности в Redux?

Неизменность (immutability) — ключевой принцип Redux, который означает, что состояние не изменяется напрямую. Вместо этого, при обновлении данных создается новый объект состояния.


Преимущества неизменности

⏺ Предсказуемость
Если состояние остается неизменным, все изменения происходят через редьюсеры одинаковым образом. Это делает код предсказуемым, удобным для тестирования и отладки.

⏺ История изменений
Благодаря неизменности можно сохранять прошлые состояния и возвращаться к ним, что используется, например, в Redux DevTools для отладки.

⏺ Избежание неожиданных изменений
При изменении состояния напрямую возможны непредсказуемые ошибки, особенно при работе с объектами или массивами (ссылочные типы). Неизменность устраняет эту проблему.


❌Пример нарушения принципа неизменности

// Неправильный подход (изменение оригинального объекта)
function reducer(state = { count: 0 }, action) {
  if (action.type === 'INCREMENT') {
    state.count++;  // Изменение состояния напрямую 
    return state;   // Возвращение измененного объекта 
  }
  return state;
}

В этом коде изменяется сам объект state, что нарушает принцип Redux и может привести к неожиданным ошибкам.


✔️Правильный подход (создание нового объекта)

// Соблюдение принципа неизменности
function reducer(state = { count: 0 }, action) {
  if (action.type === 'INCREMENT') {
    return { ...state, count: state.count + 1 }; // Создание нового объекта 
  }
  return state;
}

Здесь создается новый объект { ...state }, что гарантирует неизменность.

Redux использует библиотеку Immer, которая позволяет писать код в "мутабельном" стиле, но сохранять неизменность под капотом. Immer автоматически создает новую версию состояния, сохраняя предсказуемость Redux.

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


Ресурсы для изучения:

➡️ Вопрос

💬 Новости

🎓 База вопросов

#redux

🚩Что такое нормализация данных в Redux и почему это важно?

Если вы погружены в мир Redux, рано или поздно столкнетесь с термином "нормализация данных". Давайте разберемся, что это такое и почему без этого ваше приложение может превратиться в запутанный клубок проблем


🟣Что такое нормализация?

Нормализация данных в Redux — это процесс преобразования вложенных объектов в плоскую структуру, где:

• Каждый тип сущности хранится в своем "словаре" (объекте)
• Каждая сущность хранится по ID
• Связи между сущностями реализуются через ссылки по ID, а не через вложенные объекты

🟣Почему это важно?

1️⃣Устраняет дублирование данных
Одна и та же сущность может быть связана с разными объектами. Без нормализации придется дублировать данные, что ведет к противоречиям при обновлении.

2️⃣Упрощает обновление состояния
Чтобы изменить сущность, достаточно обновить один объект в одном месте, а не искать все его копии по всему дереву состояний.

3️⃣Повышает производительность
Селекторы и рендеринг работают быстрее с плоскими структурами, особенно при больших объемах данных.

5️⃣Облегчает кеширование
Хранение сущностей по ID упрощает кеширование и отслеживание изменений.

5️⃣Делает логику предсказуемой
Стандартизированная структура данных означает стандартизированную логику для работы с ней.


🟣Как реализовать?

Для нормализации можно использовать библиотеку normalizr или новый Redux Toolkit с его createEntityAdapter.

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


🔎🔎🔎🔎🔄

#️⃣Вопрос

#️⃣Новости

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

#Redux

🚩Какие ключевые принципы Redux ?

Redux основывается на трех ключевых принципах:

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

Весь состояние приложения хранится в одном объекте, называемом store. Это упрощает отладку, так как все данные приложения находятся в одном месте. Например:

const store = {
    user: { 
        name: 'Alice', 
        loggedIn: true 
    },
    cart: [{ 
        id: 1, 
        name: 'Item A', 
        quantity: 2 
    }]
};

2. Состояние только для чтения

Состояние нельзя изменять напрямую. Вместо этого создаются действия (actions), которые описывают изменения. Это делает изменения предсказуемыми и легко отслеживаемыми. Например:

const action = { 
    type: 'ADD_ITEM', 
    payload: { 
        id: 2, 
        name: 'Item B' 
    } 
};

3. Изменения через чистые функции

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

function cartReducer(state = [], action) {
    switch (action.type) {
        case 'ADD_ITEM':
            return [...state, action.payload];
        default:
            return state;
    }
}

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


🔎🔎🔎🔎🔄

#️⃣Вопрос

#️⃣Новости

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

#Redux

🚩Что такое Middleware в Redux?

Middleware в Redux действует как прослойка между отправкой действия (dispatch) и его обработкой в редьюсере. Они перехватывают каждое действие, позволяя выполнять дополнительную логику до того, как действие достигнет редьюсера.


1️⃣ Для чего используется Middleware?

- Обработки асинхронных операций (например, запросов к API)

- Логирования действий для отладки

- Обработки побочных эффектов

- Валидации данных или модификации действий


2️⃣ Популярные примеры middleware:

- redux-thunk: Позволяет отправлять функции вместо объектов для работы с асинхронным кодом

- redux-saga: Использует генераторы для управления сложными потоками асинхронных операций

- Логгеры: Показывают последовательность действий и изменения состояния


✨ Вопрос для самопроверки

Объясните, как работает цепочка middleware в Redux и что происходит, когда вызывается функция next(action)?

🔎🔎🔎🔎🔄

#️⃣Вопрос

#️⃣Новости

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