Belajar Redux - Setup, Store & Provider

#Pendahuluan

Dua episode pertama sudah memberi kalian teori dan peta arsitektur. Sekarang waktunya menulis kode sungguhan. Episode 3 adalah langkah pertama yang akan dipakai seluruh aplikasi Redux: membuat store dan menyambungkannya ke React.

Kita akan menggunakan configureStore, membungkus aplikasi dengan Provider dari react-redux, dan menyusun struktur project yang rapi dengan pola app/ dan features/. Di akhir episode, kalian punya store yang benar-benar berjalan — meskipun belum ada slice yang mengisi state di dalamnya.

#Membuat Store dengan configureStore

#Store Pertama

configureStore adalah cara resmi membuat store di Redux Toolkit. Dia melakukan banyak hal secara otomatis yang dulu harus diatur manual: memasang middleware default, menghubungkan Redux DevTools, dan menggabungkan reducer.

Buat file app/store.ts

import { configureStore } from "@reduxjs/toolkit"
 
export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})
 
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

configureStore menerima objek konfigurasi; properti reducer bisa berupa satu reducer atau peta reducer bernama. export type RootState dan AppDispatch akan dipakai untuk typing — detail lengkapnya di episode 7.

#Default Middleware dan DevTools

Tanpa konfigurasi apa pun, configureStore sudah memasang:

• Redux Thunk untuk action async.
• Pemeriksaan serializability dan immutability pada mode development.
• Redux DevTools yang otomatis terhubung dengan extension browser.

Menambahkan custom middleware

import logger from "redux-logger"
 
export const store = configureStore({
  reducer: {},
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
})

getDefaultMiddleware().concat(logger) adalah pola untuk menyisipkan middleware tambahan di samping default. Cara ini dipakai di episode 12 dan 16.

#Membungkus Aplikasi dengan Provider

Store belum bisa dibaca komponen sampai kita membungkus aplikasi dengan Provider dari react-redux. Provider menerima prop store dan membuat store tersedia di seluruh pohon komponen.

Bungkus aplikasi di main.tsx

import { Provider } from "react-redux"
import { store } from "./app/store"
 
createRoot(document.getElementById("root")!).render(
  <Provider store={store}>
    <App />
  </Provider>,
)

<Provider store={store}> membuat store dapat diakses dari komponen mana pun lewat hooks useSelector dan useDispatch — tanpa prop drilling sama sekali. Provider biasanya ditempatkan setinggi mungkin, tepat di akar aplikasi.

#Struktur Project: app dan features

#Folder app untuk Store

Pola yang direkomendasikan tim Redux adalah memisahkan folder app/ dan features/:

src/
  app/
    store.ts
  features/
    counter/
      counterSlice.ts
      Counter.tsx
  main.tsx

app/ berisi hal global aplikasi: pembuatan store dan, nanti, hook typed seperti useAppSelector. Dia tidak berisi logika fitur.

#Folder features untuk Slice per Fitur

features/ menampung satu folder per fitur. Setiap folder berisi slice, komponen, dan file pendukung yang hanya milik fitur tersebut. Slice counter, komponen Counter, dan testnya diletakkan bersama di features/counter/.

Pola ini disebut feature-based folders. Keunggulannya: fitur bisa dipindah, dihapus, atau dibuat lazy-load secara independen. Kombinasi pola ini dengan combineSlices untuk lazy loading akan kita bahas di episode 11.

#Verifikasi Store Berjalan

Cek bahwa seluruh rantai sudah tersambung dengan menjalankan aplikasi:

npm run dev

Buka Redux DevTools di browser. Kalian akan melihat tab yang menampilkan store kosong atau store berisi slice yang baru dibuat. Jika DevTools menampilkan state, berarti Provider dan store sudah tersambung dengan benar.

#Penutup

Episode 3 menyelesaikan fondasi infrastruktur Redux: store dibuat dengan configureStore, aplikasi dibungkus Provider, dan struktur folder app/ serta features/ siap dipakai. Store kosong ini akan mulai berisi mulai episode berikutnya.

Inti yang harus dibawa pulang:

• configureStore membuat store dengan default middleware dan DevTools otomatis.
• middleware: (getDefaultMiddleware) => ... adalah cara menyisipkan middleware tambahan.
• Provider dari react-redux menyediakan store untuk seluruh komponen.
• Letakkan Provider di akar aplikasi.
• Folder app/ untuk store; folder features/ untuk slice per fitur.
• Verifikasi keberhasilan setup lewat Redux DevTools di browser.

Di episode 4 selanjutnya kita akan mengisi store tersebut dengan createSlice dan reducers — menulis slice pertama dengan name, initialState, dan reducers, merasakan kemudahan mutasi draft berkat Immer, dan menangani action dari luar melalui extraReducers.