Cara menggunakan Redux Toolkit

2 min read 01-09-2024

Redux merupakan library JavaScript populer yang membantu dalam mengelola state aplikasi dengan cara yang terstruktur dan mudah diprediksi. Namun, penggunaan Redux tradisional dapat terasa rumit dan berulang, terutama bagi pemula. Di sinilah Redux Toolkit hadir sebagai solusi untuk menyederhanakan proses manajemen state di aplikasi React.

Redux Toolkit merupakan kumpulan utilitas yang dirancang untuk mempermudah penggunaan Redux. Toolkit ini menggabungkan praktik terbaik Redux dan menyediakan boilerplate yang diperlukan untuk membangun store Redux secara cepat dan efisien. Dalam artikel ini, kita akan mempelajari bagaimana menggunakan Redux Toolkit untuk mengelola state dalam aplikasi React.

Instalasi dan Konfigurasi

Pertama, kita perlu menginstal Redux Toolkit dan library Redux yang diperlukan dalam proyek React kita. Kita bisa melakukannya menggunakan npm atau yarn:

npm install @reduxjs/toolkit react-redux

Setelah menginstal library yang diperlukan, kita bisa mulai membuat store Redux dengan menggunakan Redux Toolkit.

Membuat Store Redux dengan Redux Toolkit

Untuk membuat store Redux, kita akan menggunakan fungsi configureStore yang disediakan oleh Redux Toolkit. Fungsi ini akan mengonfigurasi store dan menggabungkan semua reducer yang diperlukan.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice'; // Import reducer

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Dalam contoh di atas, kita membuat store dengan nama store dan menambahkan reducer counterReducer ke dalamnya. Reducer ini bertanggung jawab untuk mengelola state dari fitur counter dalam aplikasi kita.

Mendefinisikan State dan Reducer dengan Slice

Redux Toolkit menyediakan cara mudah untuk mendefinisikan state dan reducer dengan menggunakan konsep slice. Slice merupakan potongan kode yang bertanggung jawab untuk mengelola bagian tertentu dari state aplikasi.

Berikut adalah contoh bagaimana membuat slice untuk fitur counter:

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Dalam contoh di atas, kita mendefinisikan state awal dengan value bernilai 0. Kemudian, kita mendefinisikan dua reducer yaitu increment dan decrement, yang masing-masing menambahkan atau mengurangi nilai dari value dengan 1.

Mengakses dan Mengubah State dengan Hook

Untuk mengakses dan mengubah state dari store Redux, kita bisa menggunakan hook useSelector dan useDispatch yang disediakan oleh react-redux.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './features/counter/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

Dalam contoh di atas, kita menggunakan useSelector untuk mengakses nilai dari value di state counter. Kemudian, kita menggunakan useDispatch untuk mengirimkan action increment atau decrement ke store ketika tombol "Increment" atau "Decrement" ditekan.

Keuntungan Menggunakan Redux Toolkit

Berikut adalah beberapa keuntungan utama menggunakan Redux Toolkit:

Kode yang lebih singkat dan mudah dipahami: Redux Toolkit menghilangkan boilerplate yang tidak perlu dan menyediakan cara yang lebih sederhana untuk membuat dan mengelola store Redux.
Praktik terbaik yang telah terintegrasi: Toolkit ini menggabungkan praktik terbaik Redux yang direkomendasikan, seperti penggunaan immer untuk memanipulasi state secara immutabel.
Dukung type safety: Redux Toolkit menyediakan dukungan untuk type safety dengan memanfaatkan TypeScript.

Kesimpulan

Redux Toolkit merupakan alat yang sangat berguna untuk mengelola state dalam aplikasi React. Toolkit ini mempermudah proses pengembangan dan memastikan bahwa state aplikasi tetap konsisten dan mudah diprediksi. Dengan menggunakan Redux Toolkit, kita dapat fokus pada logika bisnis aplikasi dan tidak perlu khawatir tentang kompleksitas manajemen state yang rumit.