Cara Menggunakan Redux.

Redux adalah pustaka manajemen state yang menyimpan seluruh data penting aplikasi di satu tempat terpusat (store), sehingga lebih mudah dilacak dibanding state yang tersebar di banyak component.

Tiga Konsep Inti Redux

Store menyimpan seluruh state aplikasi. Action adalah objek biasa yang menjelaskan “apa yang terjadi”. Reducer adalah fungsi yang menentukan bagaimana state berubah sebagai respons terhadap action tersebut.

// Action
const tambahTugas = (judul) => ({
  type: "tugas/tambah",
  payload: judul,
});

// Reducer
function tugasReducer(state = [], action) {
  switch (action.type) {
    case "tugas/tambah":
      return [...state, { id: Date.now(), judul: action.payload }];
    default:
      return state;
  }
}

Reducer wajib bersifat pure function — tidak boleh mengubah state lama secara langsung, melainkan selalu mengembalikan objek atau array baru.

Redux Toolkit: Cara Modern Menulis Redux

Redux versi awal cukup banyak boilerplate-nya. Redux Toolkit (RTK) menjadi cara resmi dan direkomendasikan saat ini karena jauh menyederhanakan penulisan reducer dan action.

import { createSlice, configureStore } from "@reduxjs/toolkit";

const tugasSlice = createSlice({
  name: "tugas",
  initialState: [],
  reducers: {
    tambah: (state, action) => {
      state.push({ id: Date.now(), judul: action.payload });
      // terlihat seperti mengubah langsung, tapi RTK menanganinya secara aman di balik layar
    },
    hapus: (state, action) => {
      return state.filter((t) => t.id !== action.payload);
    },
  },
});

export const { tambah, hapus } = tugasSlice.actions;

const store = configureStore({
  reducer: { tugas: tugasSlice.reducer },
});

Menghubungkan Redux ke Component React

import { useSelector, useDispatch } from "react-redux";
import { tambah, hapus } from "./tugasSlice";

function DaftarTugas() {
  const tugas = useSelector((state) => state.tugas);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(tambah("Belajar Redux"))}>
        Tambah Tugas
      </button>
      <ul>
        {tugas.map((t) => (
          <li key={t.id}>
            {t.judul}
            <button onClick={() => dispatch(hapus(t.id))}>Hapus</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

useSelector membaca data dari store, sedangkan useDispatch mengirim action untuk mengubah state lewat reducer.

Kapan Redux Benar-benar Dibutuhkan

Tidak semua aplikasi React butuh Redux. Untuk state yang hanya dipakai satu atau dua component, useState biasa sudah cukup. Redux baru terasa manfaatnya saat banyak component yang tidak berhubungan langsung perlu mengakses atau mengubah data yang sama, seperti data pengguna yang login atau isi keranjang belanja.

Kesimpulan

Redux menyediakan satu sumber kebenaran (single source of truth) untuk state aplikasi lewat pola action dan reducer yang terprediksi. Redux Toolkit menjadi cara yang jauh lebih ringkas untuk menulis Redux dibanding versi awalnya, dan menjadi standar de facto di kebanyakan proyek React yang memang membutuhkan Redux.