Redux Toolkit (RTK) cung cấp gì so với Redux cổ điển?

Question

Accepted Answer

**Redux Toolkit (RTK)** là cách chính thức, được khuyến nghị để viết Redux ngày nay. Nó loại bỏ boilerplate khét tiếng của Redux cổ điển — action type thủ công, action creator, logic cập nhật immutable, thiết lập store — trong khi vẫn giữ các nguyên tắc cốt lõi.

## Vấn đề boilerplate mà RTK giải quyết

```js
// ❌ Redux cổ điển — dài dòng: action type, creator, switch reducer, immutability thủ công
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 làm tất cả

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

export const { increment, incrementBy } = counterSlice.actions; // action creator TỰ ĐỘNG sinh
const store = configureStore({ reducer: { counter: counterSlice.reducer } });
```

`createSlice` tự động sinh action type và creator, và — qua **Immer** — cho phép bạn viết code reducer trông như "mutate" được chuyển an toàn thành các cập nhật immutable. Một slice ngắn gọn thay thế tất cả các mảnh thủ công.

## RTK còn bao gồm gì nữa

```text
configureStore   → thiết lập store với DevTools + thunk middleware cấu hình sẵn
createAsyncThunk → async tiêu chuẩn (action pending/fulfilled/rejected) cho fetch dữ liệu
createEntityAdapter → state chuẩn hóa + CRUD reducer cho collection
RTK Query        → một lớp fetch/caching dữ liệu đầy đủ (như React Query, tích hợp vào Redux)
```

## Ví dụ createAsyncThunk

```js
export const fetchUsers = createAsyncThunk("users/fetch", () => api.getUsers());
// tự động dispatch users/fetch/pending | fulfilled | rejected — xử lý trong extraReducers
```

## Tại sao RTK là chuẩn bây giờ

```text
✓ ~75% ít code hơn Redux cổ điển
✓ Immer → không cần logic spread immutable thủ công (ít bug hơn)
✓ Mặc định tốt (DevTools, thunk) ngay từ đầu
✓ Khuyến khích best practice (slice, dữ liệu chuẩn hóa)
✓ RTK Query gói cả server-state management
```

## Tại sao điều này quan trọng

Lời chỉ trích lớn nhất của Redux cổ điển là boilerplate; RTK khắc phục trực tiếp điều đó, đó là lý do nó giờ là **khuyến nghị chính thức** và là ý nghĩa của "dùng Redux" trong các codebase hiện đại.

Hiểu `createSlice` (dùng Immer, action tự sinh), `createAsyncThunk` (async), `createEntityAdapter` (chuẩn hóa), và RTK Query (server state) là thiết yếu cho công việc Redux đương đại — nó giữ tính dễ đoán của Redux trong khi loại bỏ các nghi thức đã đẩy nhiều team sang các lựa chọn thay thế.