Jika Anda Membangun dengan Redux pada tahun 2026, Anda Membutuhkan Paket Ini. | oleh Shreyash | Juli 2026

Arsitektur Perangkat Redux

Redux Toolkit sepenuhnya menghilangkan mimpi buruk dengan memperkenalkan cara yang logis dan modular untuk membangun toko global Anda. Alih-alih menulis fungsi peredam monolitik besar yang mengelola semuanya sekaligus, Anda memecah negara Anda menjadi “bagian” modular independen.

Berikut adalah alur kerja langkah demi langkah yang tepat untuk menyiapkan Redux Toolkit di proyek Anda:

1. Mengukir Data dengan createSlice()

Itu createSlice() Fungsinya adalah tempat keajaiban sesungguhnya terjadi. Ini memungkinkan Anda mengelompokkan bagian data yang terisolasi (“irisan”), menentukan status awalnya, dan menulis metode peredam spesifik untuk semuanya di satu tempat.

import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { counterValue: 0 },
reducers: {
increment(state) {
state.counterValue++; // Direct mutation!
},
decrement(state) {
state.counterValue--;
}
}
});

Bagaimana mutasi langsung diperbolehkan di sini? Di balik terpalnya, Redux Toolkit secara otomatis menggunakan perpustakaan kecil bernama Selalu. Saat Anda menulis state.counterValue++Anda sebenarnya tidak mengubah keadaan global secara langsung. Immer mencegat kode Anda, melacak perubahan Anda untuk sementara “Draf Negara,” dan menghasilkan pembaruan status yang tidak dapat diubah dengan aman untuk Anda di belakang layar.

2. Rakit Potongan-potongannya dengan konfigurasiStore()

Daripada berurusan dengan metode lama seperti createStore()Redux Toolkit menyediakan configureStore(). Fungsi ini membuatnya sangat mudah untuk menggabungkan beberapa bagian negara independen menjadi satu.

Anda meneruskan pengurang irisan Anda ke yang utama reducer properti sebagai objek yang berisi pasangan nilai kunci yang jelas:

import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
reducer: {
counter: counterSlice.reducer,
// add other slices here as your app grows: auth: authSlice.reducer
}
});
export default store;

3. Ekspor dan Pengiriman Tindakan yang Dibuat Otomatis

Anda tidak lagi harus menulis jenis objek tindakan secara manual atau berisiko menimbulkan kesalahan ketik. Redux Toolkit dibuat secara otomatis pencipta tindakan untuk setiap metode peredam yang Anda tetapkan di dalam irisan Anda. Anda dapat mengaksesnya secara instan melalui .actions pada objek irisan Anda.

Pertama, ekspor langsung dari file toko Anda:

export const counterActions = counterSlice.actions;

Kemudian, di dalam komponen React Anda, impor tindakan tersebut dan jalankan menggunakan standar useDispatch() kait:

import { useDispatch } from 'react-redux';
import { counterActions } from '../store/index';
const MyComponent = () => {
const dispatch = useDispatch();
return (
dispatch(counterActions.increment());
);
}

Menangani Muatan Secara Dinamis

Apa yang terjadi jika tindakan Anda memerlukan data tambahan dari UI? Misalnya, bagaimana jika Anda tidak ingin hanya menambah 1, melainkan dengan nilai dinamis seperti 5, 10, atau 20?

Redux Toolkit menyederhanakan hal ini dengan memungkinkan Anda meneruskan nilai langsung ke fungsi pembuat tindakan yang dibuat secara otomatis:

dispatch(counterActions.increaseByValue(5));

Saat Anda meneruskan argumen ke pembuat tindakan, Redux Toolkit secara otomatis menggabungkannya ke dalam properti internal bernama payload.

Oleh karena itu, Anda harus selalu memetakan metode peredam untuk mengharapkan dan memanfaatkannya action.payload properti saat mengelola pembaruan dinamis:

reducers: {
increaseByValue(state, action) {
state.counterValue += action.payload; 
// action.payload will capture the value 5
}
}

Alat Pengembang Redux

Jika Anda ingin membuat proses debug perubahan status Anda menjadi mudah, Anda harus mengunduhnya Alat Pengembang Redux ekstensi dari Toko Web Chrome.

Ekstensi browser ini memberi Anda visibilitas lengkap atas riwayat status aplikasi Anda. Anda dapat membuka panel alat pengembang untuk melihat log kronologis dari setiap tindakan yang dikirim, melihat dengan tepat data apa yang berubah di dalam bagian negara bagian Anda dan bahkan menggunakan fitur perjalanan waktu untuk melewati tindakan mundur atau maju untuk men-debug perubahan keadaan secara visual.

Ringkasan

Dengan bermigrasi dari vanilla Redux biasa ke Redux Toolkit, alur kerja Anda dapat diskalakan dengan lancar:

• Tidak ada lagi penyalinan manual: Immer mengelola pembaruan status Anda yang tidak dapat diubah di balik sintaksis yang bersih dan dapat diubah.
• Tidak ada lagi kesalahan ketik string: Pembuat tindakan dibuat secara otomatis langsung dari nama metode peredam Anda.
• Konfigurasi bersih: configureStore() secara asli mengoordinasikan beberapa bagian dan menyambungkannya langsung ke dasbor DevTools browser Anda.