Belajar Redux - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Redux! Series ini akan membawa kalian menguasai Redux Toolkit (RTK) — pendekatan standar resmi untuk state management di aplikasi React — dari fondasi konsep sampai arsitektur production-grade. Total ada 23 episode yang tersusun dari enam fase.

Redux sempat dianggap rumit karena boilerplate-nya. Redux Toolkit hadir untuk menghapus kerumitan itu: store diatur dengan configureStore, slice ditulis dalam satu createSlice, async cukup dengan createAsyncThunk, dan data server dikelola RTK Query. Kalau kalian pernah pusing dengan prop drilling atau Context yang re-render-nya susah diprediksi, episode-episode berikut akan terasa seperti oase.

Tapi sebelum masuk ke kode, ada beberapa skill dasar dan perangkat yang wajib kalian miliki. Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan project React, menginstall Redux Toolkit, dan melakukan verifikasi pertama. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#JavaScript Modern (ES6+) dan TypeScript Dasar

Redux adalah library JavaScript, jadi kalian wajib nyaman dengan sintaks modern: destructuring, spread, arrow function, dan async/await. Redux Toolkit juga ditulis dalam TypeScript dan mendorong pemakaian TypeScript, jadi pemahaman dasar tentang interface, type alias, dan generics akan sangat membantu.

Kemampuan ES6+ yang dipakai sepanjang series

const { user, token } = state.auth
const nextItems = [...items, newItem]
const fetchUser = async (id) => {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
}

state.auth adalah objek, dan const { user, token } = state.auth disebut destructuring. Kalian akan melihat pola ini terus-menerus di dalam selector dan reducer.

#React Hooks: useState, useEffect, useContext

Redux adalah library state management untuk React, jadi kalian harus nyaman dengan hooks. Pahamilah:

• useState untuk state lokal komponen.
• useEffect untuk efek samping seperti fetching data.
• useContext untuk berbagi nilai antar komponen, sekaligus penyebab prop drilling terasa menyakitkan.

Mulai dari episode 5, kalian akan mengganti sebagian besar pemakaian useContext dengan hooks Redux seperti useSelector dan useDispatch.

#Konsep Immutability

Ini fondasi yang paling penting. Immutability berarti state tidak pernah diubah langsung; setiap perubahan menghasilkan state baru. Redux menjamin prediktabilitas lewat aturan ini, dan Immer — yang sudah tertanam di RTK — memungkinkan kalian menulis kode yang terlihat seperti mutasi padahal di balik layar menghasilkan objek baru.

Mutasi vs immutable update

const state = { count: 0 }
state.count = 1
 
const nextState = { ...state, count: state.count + 1 }

{ ...state, count: state.count + 1 } memakai spread operator, sehingga state lama tidak berubah dan nextState adalah objek baru. Ini pola yang akan kalian gunakan berulang kali, meskipun di dalam createSlice penulisan immutable update ditangani otomatis oleh Immer.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js 18+ dan Package Manager

Redux Toolkit membutuhkan Node.js versi 18 atau lebih baru. Cek versi kalian:

node --version
npm --version

Output harus menampilkan minimal v18.0.0. Sebagai alternatif, kalian bisa memakai Bun yang lebih cepat:

bun --version

Sepanjang series ini, contoh perintah memakai npm, tapi semua bisa dijalankan dengan bun add atau bun install bila kalian lebih nyaman.

#Redux DevTools Extension

Redux DevTools adalah extension browser (Chrome dan Firefox) yang menjadi senjata utama debugging. Install dulu sekarang — cukup dari browser store, tanpa konfigurasi tambahan.

#Membuat Project React

Untuk project baru, Vite adalah pilihan paling ringan:

npm create vite@latest rtk-app -- --template react-ts
cd rtk-app
npm install

npm create vite@latest menciptakan project React + TypeScript. Kalian juga bisa menambahkan ke project Next.js yang sudah ada — caranya kita bahas mendalam di episode 14.

#Menginstall Redux Toolkit

#Instalasi Paket

Dua paket yang wajib: @reduxjs/toolkit (pustaka inti) dan react-redux (pengikat Redux ke React):

npm install @reduxjs/toolkit react-redux

Dengan Bun:

bun add @reduxjs/toolkit react-redux

@reduxjs/toolkit membawa serta Redux core, Immer, Reselect, dan Redux Thunk. Satu instalasi, seluruh fondasi terpasang.

#Verifikasi Instalasi

Pastikan versi terpasang sesuai:

npm list @reduxjs/toolkit react-redux

Per penulisan series ini, versi terbaru adalah Redux Toolkit v2.12.0 dan Redux core v5.x. Untuk cek versi terkini kapan saja:

npm view @reduxjs/toolkit version

Catat hasilnya, karena episode 20 akan membahas fitur-fitur stabil terbaru dari rilis 2.x.

#Verifikasi Environment

#Test Pertama dengan Kode

Buat file src/store.ts dan tulis store pertama:

Store Redux pertama

import { configureStore } from "@reduxjs/toolkit"
 
const store = configureStore({
  reducer: {},
})
 
console.log(store.getState())

store.getState() seharusnya mengembalikan objek kosong tanpa error. Detail setiap baris kode di atas akan kita bedah di episode 3 — untuk sekarang, tujuannya hanya memastikan seluruh environment bekerja.

#Checklist Kesiapan

Rangkuman prasyarat yang sudah kalian siapkan di episode 0:

• Node.js 18+ dengan npm atau Bun.
• JavaScript modern: destructuring, spread, async/await, dan dasar TypeScript.
• React hooks: useState, useEffect, useContext.
• Konsep immutability: setiap perubahan state menghasilkan objek baru.
• Redux DevTools terinstall di browser.
• Redux Toolkit + react-redux terpasang dan store pertama berhasil dibuat.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Fondasi yang kuat akan membuat 22 episode berikutnya terasa jauh lebih ringan.

#Penutup

Di episode 0 ini kalian sudah menyiapkan pijakan untuk seluruh series: menguasai skill dasar JavaScript dan React, memahami immutability, menyiapkan project React dengan Vite, menginstall Redux Toolkit v2.12.0, dan memverifikasi store pertama.

Inti yang harus dibawa pulang:

• Redux Toolkit adalah standar resmi state management untuk React, dibangun di atas Redux core.
• Install @reduxjs/toolkit dan react-redux pada project yang sudah punya React.
• Pahami destructuring, spread, dan async/await sebelum lanjut.
• Immutability adalah aturan emas: jangan pernah mutasi state secara langsung.
• configureStore membuat store dengan DevTools dan middleware bawaan otomatis.
• Redux DevTools extension wajib dipasang sejak awal.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan Redux — dari prop drilling, kelahiran Flux oleh Facebook, lahirnya Redux oleh Dan Abramov, hingga evolusinya menjadi Redux Toolkit. Pastikan environment kalian sudah siap, karena perjalanan Belajar Redux baru saja dimulai!