1. Kenapa Ada Drama di State Management?
Saat membangun aplikasi React yang kecil, useState dan useContext biasanya sudah cukup. Tapi kalau aplikasi mulai tumbuh dan makin kompleks, mengelola state bisa jadi mimpi buruk!
State berubah di satu tempat, harus dikirim ke tempat lain, ada yang tidak sinkron, dan tiba-tiba komponen re-render tanpa alasan. Itulah drama state management!
Redux hadir sebagai "sutradara" untuk mengatur alur cerita state di aplikasi kita.
2. Apa Itu Redux?
Redux adalah pustaka untuk mengelola state global dalam aplikasi React. Dengan Redux, kita bisa menyimpan semua state di satu tempat (store) dan mengaksesnya dari mana saja tanpa perlu prop drilling.
Redux memiliki tiga konsep utama: Store: Tempat menyimpan semua state aplikasi. Action: Perintah untuk mengubah state. Reducer: Fungsi yang menentukan bagaimana state berubah setelah menerima action.
3. Cara Menggunakan Redux di React
Yuk, kita buat contoh sederhana!
3.1. Install Redux
Jalankan perintah ini di terminal:
npm install @reduxjs/toolkit react-redux
Redux Toolkit adalah cara modern untuk menggunakan Redux tanpa banyak boilerplate.
3.2. Membuat Store
Buat file store.js:
import { configureStore, createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
name: "counter",
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; },
decrement: (state) => { state.value -= 1; },
},
});
export const { increment, decrement } = counterSlice.actions;
export const store = configureStore({ reducer: { counter: counterSlice.reducer } });
3.3. Menghubungkan Redux ke Aplikasi
Di index.js, bungkus aplikasi dengan Provider:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
3.4. Menggunakan Redux di Komponen
Sekarang, buat komponen counter:
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./store";
const Counter = () => {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => dispatch(increment())}>Tambah</button>
<button onClick={() => dispatch(decrement())}>Kurang</button>
</div>
);
};
export default Counter;
Sekarang state counter bisa diakses dari mana saja tanpa perlu prop drilling!
4. Redux Itu Wajib?
Redux memang powerful, tapi tidak selalu wajib. Gunakan jika: Aplikasi besar dengan banyak state yang harus dikelola. Perlu memisahkan logika pengelolaan state dari komponen. Banyak komponen yang perlu membaca dan mengubah state yang sama.
Kalau aplikasi kecil, cukup pakai useState atau Context API agar lebih ringan.
5. Kesimpulan
Redux membantu mengelola state global dengan lebih terstruktur. Menggunakan store, action, dan reducer untuk mengatur perubahan state. Redux cocok untuk aplikasi skala besar dengan banyak state yang kompleks. Gunakan Redux Toolkit agar lebih mudah dan lebih sedikit kode boilerplate.
Kalau aplikasi React-mu mulai berantakan karena state management, mungkin sudah saatnya pakai Redux!
0 Comments