Redux Toolkit (RTK) ให้อะไรมากกว่า Redux แบบคลาสสิก?

Question

Accepted Answer

**Redux Toolkit (RTK)** เป็นวิธีการอย่างเป็นทางการ และแนะนำในการเขียน Redux วันนี้ มันกำจัดปัญหาที่เป็นที่รู้จักกันดีของ Redux — ประเภทการกระทำด้วยตนเอง ผู้สร้างการกระทำ ตรรกะการอัปเดต immutable การตั้งค่าร้านค้า — ในขณะที่รักษาหลักการพื้นฐานเดียวกัน

## ปัญหา 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 "กลายพันธุ์" ที่แปลงเป็นการอัปเดต immutable อย่างปลอดภัย ส่วนที่กระชับข้อมูลทดแทนทั้งหมดชิ้นด้วยตนเอง

## สิ่งอื่น ๆ ที่ 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` (async), `createEntityAdapter` (normalization) และ RTK Query (server state) เป็นสิ่งจำเป็นสำหรับการทำงาน Redux ร่วมสมัย — มันรักษาความเชื่อมั่นของ Redux ขณะเอาพิธีรีตองออกที่ผลักดันทีมจำนวนมากไปหาทางเลือก