Belajar Redux - Fitur Stabil Terbaru (RTK 2.x)

#Pendahuluan

Redux Toolkit 2.x adalah rilis yang berbeda dari seri 1.x: ini versi yang dibangun TypeScript-first, memakai Immer sebagai jantung mutasi state, dan menghapus pola-pola legacy yang menambah kerumitan. Episode 20 memandu kalian memahami apa saja yang stabil dan baru di v2.x — supaya ketika membaca changelog atau upgrading, kalian tahu bagian mana yang memengaruhi kode.

Beberapa pembahasan bersifat versi-spesifik dan akan terus berubah. Karena itu biasakan memverifikasi dengan registry sebelum memperbarui dependensi. Kita bahas empat area: module system dan TypeScript, Immer 10, skills files untuk AI tooling, lalu ringkasan rilis 2026 dari v2.11 sampai v2.12.0.

#Kemampuan Dasar v2.x

#ESM dan CommonJS Penuh

RTK 2.x mengirimkan build dual-module: ESM dan CJS dalam satu paket. Bundler modern memilih ESM untuk tree-shaking, sementara lingkungan lama tetap mendapat CJS:

npm view @reduxjs/toolkit version

import { createSlice, configureStore } from "@reduxjs/toolkit"
import { setupListeners } from "@reduxjs/toolkit/query"

Node.js 20+ dan bundler terbaru memakai ESM secara default. Di RTK 2.x, Redux core juga berada di versi 5 yang ESM-first, jadi seluruh rantai dependensi — dari @reduxjs/toolkit hingga react-redux — berjalan konsisten dalam satu module system.

#Kebijakan Dukungan TypeScript

RTK 2.x menetapkan kebijakan versi TypeScript: mendukung TypeScript 5.4 ke atas. Ini berarti kode sumber RTK ditulis memakai fitur TS 5.x, dan deklarasi tipe memanfaatkan generic yang lebih ekspresif. Implikasinya di project kalian:

• Versi TS di bawah 5.4 tidak akan mendapatkan deklarasi yang tepat.
• tsconfig sebaiknya memakai "moduleResolution": "bundler" agar tipe ESM ter-resolve dengan benar.
• Fitur seperti satisfies dan template literal types bisa dipakai bebas di deklarasi.

Cek versi TypeScript project kalian sebelum upgrade ke RTK 2.x:

npm ls typescript

#Immer 10 dan Peningkatan Performa

#Mutasi Draft yang Lebih Cepat

Immer versi 10 mempercepat pembuatan draft dan finalisasi state. Karena Redux Toolkit memakai Immer untuk seluruh reducers dan updateQueryData, peningkatan performa Immer langsung terasa pada aplikasi dengan update state besar:

Reducer yang memanfaatkan Immer 10

updateAllUsers: (state, action) => {
  const stamp = action.payload
  for (const user of Object.values(state.users)) {
    user.lastSync = stamp
  }
}

Mutasi draft seperti di atas dijalankan Immer secara efisien di versi 10. Tidak ada perubahan API untuk kalian — hanya hasil lebih cepat dan jejak memori lebih kecil saat menyalin perubahan.

#Verifikasi Performa di Aplikasi Kalian

Performansi yang diklaim sebaiknya dibuktikan sendiri:

console.time("updateMany")
store.dispatch(updateMany(listOfUsers))
console.timeEnd("updateMany")

Bandingkan waktu sebelum dan sesudah upgrade Immer pada slice dengan data besar. Di sebagian besar kasus, perbedaan terlihat pada operasi batch ratusan hingga ribuan entitas.

#Skills Files untuk AI Tooling

#Paket Resmi yang Dikenali AI

Mulai seri rilis 2025-2026, tim Redux merilis skills files yang bisa dibaca alat bantu coding berbasis AI — diinspirasi ekosistem TanStack Intent. Skills files adalah markdown terstruktur berisi panduan: kapan memakai createAsyncThunk, pola RTK Query yang disarankan, dan kesalahan umum yang harus dihindari:

{
  "files": [
    "node_modules/@reduxjs/toolkit/skills/rtk-query.md",
    "node_modules/@reduxjs/toolkit/skills/async-thunk.md"
  ]
}

Alat bantu AI membaca berkas tersebut saat menulis kode Redux, sehingga output yang dihasilkan mengikuti konvensi resmi — bukan pola generik yang mungkin keliru. Untuk project besar, menyimpan salinan skills di repo sebagai onboarding docs juga membantu tim.

#Catatan Rilis 2026

#v2.11 hingga v2.12.0

Rilis 2026 menyempurnakan RTK Query dan kualitas pengalaman:

• Infinite query status flags: hook infinite query kini mengekspos status khusus seperti isFetchingNextPage, memudahkan menampilkan spinner halaman berikutnya tanpa state manual.
• Batching fixes: perbaikan dalam pengelompokan update state sehingga notifikasi subscriber lebih efisien dan konsisten.
• Exported hook options types: tipe opsi hook seperti polling, refetch, dan select diekspor secara publik — berguna untuk menulis wrapper hook ber-typing.
• Perbaikan fetchBaseQuery dan retry: penanganan edge case response non-2xx, header yang hilang, dan perilaku retry untuk request idempotent.

Contoh memakai status flags baru:

Status infinite query di v2.12

const { data, isFetchingNextPage, fetchNextPage } =
  useGetPostsInfiniteQuery()
 
return (
  <>
    <button
      disabled={isFetchingNextPage}
      onClick={() => fetchNextPage()}
    >
      Muat lagi
    </button>
  </>
)

isFetchingNextPage membedakan pemuatan halaman tambahan dari pemuatan awal — perubahan kecil yang menghilangkan tebakan di UI.

#Menjaga Dependensi Tetap Terkini

Versi yang ditulis di sini akan tertinggal seiring waktu. Kebiasaan yang benar:

npm view @reduxjs/toolkit version
npm view @reduxjs/toolkit dist-tags

Bacalah changelog resmi di GitHub reduxjs/redux-toolkit sebelum upgrade minor. Khususnya bagian breaking changes — biasanya tercantum di heading release dengan label peringatan.

#Penutup

Redux Toolkit 2.x adalah fondasi modern untuk state management: ESM dan CommonJS penuh, kebijakan TypeScript 5.4+, Immer 10 dengan performa lebih baik, skills files untuk alat bantu AI, dan perbaikan berkelanjutan lewat rilis 2026. Memahami kemampuan dan catatan rilis membantu kalian memakai versi yang tepat dan mengetahuinya saat membaca dokumentasi.

Inti yang harus dibawa pulang:

• RTK 2.x mendukung ESM dan CJS penuh dalam satu paket.
• Kebijakan dukungan dimulai dari TypeScript 5.4 ke atas.
• Immer 10 mempercepat pembuatan draft dan finalisasi state.
• Skills files membantu alat bantu AI menulis kode Redux sesuai konvensi.
• v2.12 menambahkan status flags infinite query dan perbaikan batching.
• Selalu verifikasi versi terbaru lewat npm view dan baca changelog sebelum upgrade.

Episode 21 berikutnya menutup sisi engineering dengan produksi-ready architecture — kalian akan merancang arsitektur untuk tim besar: feature-based slices, standar penulisan thunk dan mutation, code review patterns, kesadaran bundle size, tree-shaking, monitoring error, dan dokumentasi onboarding.