Cara menggunakan Redux Toolkit – Panduan Praktis untuk Pengembang

Jika Anda sudah lama berkecimpung dalam pengembangan aplikasi React, pasti tidak asing dengan Redux. Namun, mengelola store secara manual kadang terasa rumit, terutama ketika aplikasi mulai tumbuh. Di sinilah Redux Toolkit hadir sebagai solusi yang lebih sederhana, terstandarisasi, dan teroptimasi. Artikel ini akan membimbing Anda cara menggunakan Redux Toolkit mulai dari instalasi, penulisan slice, hingga integrasi dengan komponen React.

Tak hanya mempercepat proses development, Redux Toolkit juga membantu mengurangi boilerplate code yang biasanya harus Anda tulis secara berulang. Dengan API yang intuitif, bahkan developer yang baru pertama kali menyentuh Redux sekaligus dapat memahami alur state management dengan lebih cepat. Jadi, siap meng-upgrade skill Anda? Simak panduan lengkap berikut!

Selain itu, jika Anda sedang mencari cara mengelola keuangan pribadi atau keluarga, kami juga menyediakan artikel Strategi Mengelola Uang untuk Persiapan Hari Raya yang Efektif yang dapat membantu menyeimbangkan antara pekerjaan dan kehidupan finansial.

Cara menggunakan Redux Toolkit: Langkah demi Langkah

Berikut ini alur dasar yang perlu Anda ikuti untuk mengimplementasikan Redux Toolkit dalam proyek React Anda:

• Instalasi paket @reduxjs/toolkit dan react-redux.
• Membuat slice dengan createSlice untuk mendefinisikan state, reducer, dan aksi.
• Mengkonfigurasi store menggunakan configureStore.
• Menghubungkan React component ke store lewat useSelector dan useDispatch.

Cara menggunakan Redux Toolkit: Instalasi dan Setup Awal

Mulailah dengan menambahkan dua paket utama ke dalam proyek Anda. Buka terminal dan jalankan perintah berikut:

npm install @reduxjs/toolkit react-redux

Setelah instalasi selesai, buat folder store di dalam src project Anda. Di dalamnya, buat file store.js yang berisi konfigurasi store sederhana:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
export const store = configureStore({ reducer: { counter: counterReducer, },
});

Selanjutnya, bungkus aplikasi Anda dengan Provider yang disediakan oleh react-redux agar semua komponen dapat mengakses store.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store/store';
import App from './App';
ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root')
);

Cara menggunakan Redux Toolkit: Membuat Slice

Slice adalah inti dari Redux Toolkit. Ia menggabungkan definisi state awal, reducer, dan aksi dalam satu tempat. Buat file counterSlice.js di dalam folder store:

import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({ name: 'counter', initialState: { value: 0, }, reducers: { increment: state => { state.value += 1; }, decrement: state => { state.value -= 1; }, addAmount: (state, action) => { state.value += action.payload; }, },
});
export const { increment, decrement, addAmount } = counterSlice.actions;
export default counterSlice.reducer;

Perhatikan bahwa reducer di dalam slice dapat menulis kode mutatif (mis. state.value += 1) karena Redux Toolkit menggunakan Immer di belakang layar untuk menghasilkan state yang tidak berubah (immutable).

Cara menggunakan Redux Toolkit: Mengakses State di Komponen

Setelah slice siap, Anda bisa mengakses dan memanipulasi state dari komponen React menggunakan hook useSelector dan useDispatch. Berikut contoh sederhana counter:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, addAmount } from './store/counterSlice';
function Counter() { const count = useSelector(state => state.counter.value); const dispatch = useDispatch(); return ( <div> <h1>Count: {count}</h1> <button onClick={() => dispatch(increment())}>Increment</button> <button onClick={() => dispatch(decrement())}>Decrement</button> <button onClick={() => dispatch(addAmount(5))}>Add 5</button> </div> );
}
export default Counter;

Dengan pendekatan ini, Anda tidak perlu lagi menulis action creator atau tipe aksi secara terpisah; semuanya sudah terautomatisasi oleh Redux Toolkit.

Fitur Unggulan Redux Toolkit yang Membantu Pengembangan

Salah satu alasan mengapa Redux Toolkit semakin populer adalah karena ia menyertakan beberapa API penting yang memudahkan developer. Berikut beberapa fitur yang patut Anda eksplorasi:

• createAsyncThunk: Mempermudah penanganan aksi asinkron (mis. panggilan API) tanpa menulis boilerplate action types.
• createEntityAdapter: Menyediakan helper untuk mengelola koleksi data terstruktur (seperti daftar produk) dengan cara yang efisien.
• RTK Query: Layer data fetching yang terintegrasi langsung dengan Redux store, mengurangi kebutuhan library eksternal seperti axios atau react-query.

Cara menggunakan Redux Toolkit dengan createAsyncThunk

Misalnya Anda ingin mengambil data pengguna dari API. Berikut contoh penggunaan createAsyncThunk:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';
export const fetchUser = createAsyncThunk( 'user/fetchUser', async (userId, thunkAPI) => { const response = await axios.get(`/api/users/${userId}`); return response.data; }
);
const userSlice = createSlice({ name: 'user', initialState: { data: null, loading: false, error: null }, reducers: {}, extraReducers: builder => { builder .addCase(fetchUser.pending, state => { state.loading = true; }) .addCase(fetchUser.fulfilled, (state, action) => { state.loading = false; state.data = action.payload; }) .addCase(fetchUser.rejected, (state, action) => { state.loading = false; state.error = action.error.message; }); },
});
export default userSlice.reducer;

Dengan createAsyncThunk, semua fase aksi (pending, fulfilled, rejected) sudah otomatis didefinisikan, sehingga kode Anda tetap bersih.

Cara menggunakan Redux Toolkit dengan RTK Query

Jika Anda menginginkan solusi lengkap untuk data fetching, RTK Query adalah pilihan yang tepat. Contoh sederhana:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const postsApi = createApi({ reducerPath: 'postsApi', baseQuery: fetchBaseQuery({ baseUrl: '/api' }), endpoints: builder => ({ getPosts: builder.query({ query: () => 'posts', }), }),
});
export const { useGetPostsQuery } = postsApi;

Setelah menambahkan postsApi.reducer ke dalam store, Anda dapat memanggil data di komponen hanya dengan satu baris hook:

function PostsList() { const { data: posts, error, isLoading } = useGetPostsQuery(); if (isLoading) return <div>Loading...</div>; if (error) return <div>Error: {error.toString()}</div>; return ( <ul> {posts.map(post => ( <li key={post.id}>{post.title}</li> ))} </ul> );
}

RTK Query mengelola caching, invalidasi, dan refetch otomatis, menjadikannya alternatif kuat untuk library data fetching lain.

Tips dan Praktik Terbaik dalam Menggunakan Redux Toolkit

Setelah Anda memahami dasar-dasar, ada beberapa strategi yang dapat membuat proyek Anda lebih terstruktur dan mudah dipelihara.

Gunakan createSlice untuk Setiap Domain Bisnis

Alih-alih menumpuk semua reducer dalam satu file besar, pisahkan menjadi slice yang merepresentasikan domain terpisah, seperti authSlice, productSlice, atau cartSlice. Ini meningkatkan keterbacaan kode dan memudahkan kolaborasi tim.

Manfaatkan TypeScript Jika Memungkinkan

Redux Toolkit sudah menyediakan tipe yang kuat untuk createSlice, createAsyncThunk, dan RTK Query. Menggunakan TypeScript akan mengurangi bug runtime dan membuat IDE Anda lebih “pintar”.

Hindari Mutasi Langsung di Luar Slice

Selalu gunakan aksi yang didefinisikan dalam slice untuk memodifikasi state. Jika Anda perlu memanipulasi data di luar reducer, pertimbangkan untuk menggunakan createAsyncThunk atau middleware lain.

Gunakan Immer Secara Bijak

Walaupun Immer memungkinkan penulisan kode mutatif, tetap perhatikan kompleksitas logika reducer. Jika logika menjadi terlalu rumit, pertimbangkan untuk memecahnya menjadi beberapa reducer kecil atau menggunakan selector memoized dengan reselect.

Integrasi dengan Tools Lain

Jika Anda sedang mempelajari cara kerja API modern, jangan lewatkan Tutorial GraphQL vs REST – Panduan Lengkap untuk Pengembang. Pengetahuan tersebut dapat melengkapi penggunaan RTK Query, yang mendukung baik REST maupun GraphQL.

Studi Kasus: Membangun Todo App dengan Redux Toolkit

Untuk memberikan gambaran nyata, mari kita buat aplikasi Todo sederhana yang memanfaatkan semua fitur utama Redux Toolkit. Langkah-langkahnya meliputi:

1. Membuat todosSlice dengan aksi addTodo, toggleTodo, dan removeTodo.
2. Menggunakan createAsyncThunk untuk menyimpan todo ke server (simulasi dengan setTimeout).
3. Menampilkan daftar todo dengan useSelector dan menghubungkan tombol aksi dengan useDispatch.

Berikut contoh todosSlice.js:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
export const saveTodo = createAsyncThunk( 'todos/saveTodo', async (todo) => { // Simulasi API call return new Promise(resolve => setTimeout(() => resolve(todo), 500)); }
);
const todosSlice = createSlice({ name: 'todos', initialState: { items: [], status: 'idle', }, reducers: { addTodo: (state, action) => { state.items.push({ id: Date.now(), text: action.payload, completed: false }); }, toggleTodo: (state, action) => { const todo = state.items.find(t => t.id === action.payload); if (todo) todo.completed = !todo.completed; }, removeTodo: (state, action) => { state.items = state.items.filter(t => t.id !== action.payload); }, }, extraReducers: builder => { builder .addCase(saveTodo.pending, state => { state.status = 'loading'; }) .addCase(saveTodo.fulfilled, (state, action) => { state.status = 'succeeded'; // Simulasi penambahan otomatis setelah disimpan state.items.push({ ...action.payload, id: Date.now() }); }) .addCase(saveTodo.rejected, state => { state.status = 'failed'; }); },
});
export const { addTodo, toggleTodo, removeTodo } = todosSlice.actions;
export default todosSlice.reducer;

Di komponen TodoList, Anda dapat menggabungkan semua fungsi di atas, menjadikan aplikasi lengkap dengan state yang terkelola secara elegan.

Cara menggunakan Redux Toolkit dalam Skala Besar

Ketika proyek Anda berkembang menjadi multi‑module, pertimbangkan untuk menata store dengan teknik “module‑based”:

• Buat folder features dengan sub‑folder per domain.
• Setiap domain memiliki slice, api (jika memakai RTK Query), dan hooks khusus.
• Gunakan combineReducers secara otomatis lewat configureStore yang menerima objek reducer berisi semua slice.

Pola ini memudahkan tim untuk bekerja secara paralel tanpa konflik.

Kesimpulan Akhir

Dengan mengikuti cara menggunakan Redux Toolkit yang telah dijelaskan di atas, Anda kini dapat membangun aplikasi React yang lebih terstruktur, mudah dipelihara, dan efisien. Mulai dari instalasi, pembuatan slice, hingga integrasi fitur-fitur canggih seperti createAsyncThunk dan RTK Query, semuanya dapat dilakukan dengan beberapa baris kode saja.

Ingat, kunci sukses tidak hanya pada menulis kode, melainkan juga pada penerapan praktik terbaik: memisahkan slice per domain, memanfaatkan TypeScript, serta mengoptimalkan performa dengan selector memoized. Jika Anda ingin menambah pengetahuan di bidang lain, jangan lewatkan artikel Tutorial Web Scraping Python untuk Pemula – Panduan Lengkap yang dapat melengkapi skill Anda dalam pengolahan data.

Semoga panduan ini membantu Anda menguasai Redux Toolkit dan meningkatkan produktivitas dalam setiap proyek React. Selamat mencoba, dan jangan ragu bereksperimen dengan fitur-fitur lanjutan yang ada!