Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як RTK реалізує іммутабельність?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Коротка відповідь

> **Redux Toolkit реалізує іммутабельність через бібліотеку Immer**, яка дозволяє **писати «мутуючий» код**, але **насправді створює іммутабельну копію** стану.

---

## Нагадаю: що таке іммутабельність

Іммутабельність - це принцип, за яким **не можна змінювати наявний стан напряму**, а потрібно **створювати новий**:

Неправильно:

```javascript
state.count++     // mutation (changing an existing object)
```

Правильно (у чистому Redux):

```javascript
return { ...state, count: state.count + 1 } // new object
```

---

## Як працює Immer усередині RTK

Immer робить ось що:

1. За кожного виклику редʼюсера RTK передає в нього «чернетку» (draft) стану.
2. Цей draft - це проксі-об'єкт, який відстежує всі зміни.
3. Ти можеш «мутувати» його звичайним чином:

```javascript
  state.value++
  state.todos.push(todo)
  state.user.name = 'Tim'
  ```
4. Після виходу з функції Immer автоматично створює іммутабельну копію стану, застосовуючи всі зафіксовані зміни.
5. Підсумок: старий стан залишається незміненим, новий створюється з урахуванням змін.

---

## Приклад (магія Immer)

```javascript
import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      // Write as if mutating
      state.value++
    }
  }
})
```

Що робить RTK під капотом:

```javascript
import { produce } from 'immer'

function incrementReducer(state, action) {
  return produce(state, draft => {
    draft.value++
  })
}
```

produce() з Immer створює новий іммутабельний об'єкт, де value збільшено, а все інше - ті самі посилання.

---

## Як працює produce()

```javascript
import { produce } from 'immer'

const base = { count: 1, user: { name: 'Tim' } }

const next = produce(base, draft => {
  draft.count++
  draft.user.name = 'John'
})

console.log(next)
// { count: 2, user: { name: 'John' } }

console.log(base)
// { count: 1, user: { name: 'Tim' } }  did not change
```

Immer використовує Proxy та структурне порівняння, щоб ефективно копіювати лише змінені гілки дерева стану (а не весь об'єкт).

---

## Чому це зручно

| Проблема без Immer | Рішення в RTK |
|---|---|
| Потрібно писати return { ...state, ... } щоразу | Можна писати state.value++ |
| Складно оновлювати вкладені об'єкти | Просто звертаєшся до state.user.profile.name |
| Ризик випадкової мутації | Immer захищає від цього |
| Важко читати код | Логіка редʼюсера стає «природною» та чистою |

---

## Приклад порівняння

### Звичайний Redux:

```javascript
function reducer(state, action) {
  return {
    ...state,
    user: {
      ...state.user,
      name: 'Alex'
    }
  }
}
```

### Redux Toolkit (Immer усередині):

```javascript
function reducer(state, action) {
  state.user.name = 'Alex'
}
```

Код став утричі коротшим, а іммутабельність при цьому збереглася.

---

## Що ще робить Immer корисним

- Копіює лише змінені частини state, тому працює ефективно.
- Підтримує складні структури: масиви, об'єкти, вкладеність.
- Легко відловлює помилки мутацій у Dev-режимі.
- Працює з TypeScript без проблем.

---

## Візуально

```javascript
[current state]
   ↓  (Immer creates a draft via Proxy)
[draft: temporary copy]
   ↓  (you "mutate" it)
Immer records the changes
   ↓
[new immutable state]
```

---

## Підсумок

| Що | Як працює |
|---|---|
| Immer | Бібліотека, що створює іммутабельні копії через Proxy |
| RTK | Використовує Immer усередині createSlice() |
| Розробник | Пише «мутуючий» код, але отримує іммутабельність безкоштовно |
| Результат | Менше коду, менше помилок, чиста логіка |

---

Підсумкове формулювання:

> Redux Toolkit забезпечує іммутабельність стану за допомогою Immer, який створює «чорновий» Proxy-об'єкт, відстежує зміни й повертає новий, безпечно скопійований стан, не змінюючи оригінал.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати557 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.