Τι προσφέρει το Redux Toolkit (RTK) σε σύγκριση με το κλασικό Redux;

Question

IT Interview Practice · Accepted Answer

**Redux Toolkit (RTK)** είναι ο επίσημος και συνιστώμενος τρόπος για να γράψετε Redux σήμερα. Εξαλείφει το臭infamous boilerplate του κλασικού Redux — ручные τύποι δράσης, δημιουργοί δράσης, λογική ανίσχυρης ενημέρωσης, ρύθμιση αποθήκης — ενώ διατηρεί τις ίδιες βασικές αρχές.

## Το πρόβλημα boilerplate που λύνει το RTK

```js
// ❌ classic Redux — verbose: action types, creators, switch reducers, manual immutability
const INCREMENT = "counter/increment";
const increment = () => ({ type: INCREMENT });
function reducer(state = { value: 0 }, action) {
  switch (action.type) {
    case INCREMENT: return { ...state, value: state.value + 1 };
    default: return state;
  }
}
```

## RTK: createSlice κάνει τα πάντα

```js
import { createSlice, configureStore } from "@reduxjs/toolkit";

export const { increment, incrementBy } = counterSlice.actions; // action creators AUTO-generated
const store = configureStore({ reducer: { counter: counterSlice.reducer } });
```

`createSlice` δημιουργεί αυτόματα τύπους δράσης και δημιουργούς, και — μέσω **Immer** — σας επιτρέπει να γράψετε κώδικα reducer "μεταλλαγής" που μετατρέπεται με ασφάλεια σε ανίσχυρες ενημερώσεις. Ένα λακωνικό slice αντικαθιστά όλα τα χειροκίνητα κομμάτια.

## Τι άλλο περιλαμβάνει το RTK

```text
configureStore   → store setup with DevTools + thunk middleware preconfigured
createAsyncThunk → standard async (pending/fulfilled/rejected actions) for data fetching
createEntityAdapter → normalized state + CRUD reducers for collections
RTK Query        → a full data-fetching/caching layer (like React Query, built into Redux)
```

## Παράδειγμα createAsyncThunk

```js
export const fetchUsers = createAsyncThunk("users/fetch", () => api.getUsers());
// auto-dispatches users/fetch/pending | fulfilled | rejected — handle in extraReducers
```

## Γιατί το RTK είναι το πρότυπο τώρα

```text
✓ ~75% less code than classic Redux
✓ Immer → no manual immutable spread logic (fewer bugs)
✓ Good defaults (DevTools, thunk) out of the box
✓ Encourages best practices (slices, normalized data)
✓ RTK Query bundles server-state management
```

## Γιατί έχει σημασία

Η μεγαλύτερη κριτική του κλασικού Redux ήταν το boilerplate του. το RTK το διορθώνει απευθείας, γι' αυτό είναι τώρα η **επίσημη σύσταση** και αυτό που σημαίνει "χρήση Redux" σε σύγχρονες βάσεις κώδικα.

Η κατανόηση `createSlice` (κινείται από Immer, αυτόματα παραγόμενες δράσεις), `createAsyncThunk` (ασύγχρονη), `createEntityAdapter` (ομαλοποίηση) και RTK Query (κατάσταση διακομιστή) είναι ουσιαστική για σύγχρονη δουλειά Redux — διατηρεί την προβλεψιμότητα του Redux ενώ αφαιρεί τη τελετουργία που οδήγησε πολλές ομάδες σε εναλλακτικές λύσεις.

Το πρόβλημα boilerplate που λύνει το RTK

RTK: createSlice κάνει τα πάντα

Τι άλλο περιλαμβάνει το RTK

Παράδειγμα createAsyncThunk

Γιατί το RTK είναι το πρότυπο τώρα

Γιατί έχει σημασία

Σχετικές ερωτήσεις