### **Materi 4: Pengenalan Redux Toolkit (RTK)**
**Redux Toolkit (RTK)** adalah cara modern dan lebih efisien untuk mengelola state di aplikasi Redux. Tujuan utama dari RTK adalah untuk menyederhanakan konfigurasi Redux, membuat kode lebih bersih, serta memberikan API yang lebih mudah digunakan untuk menangani state dan operasi asinkron.
#### **1. Mengapa Menggunakan Redux Toolkit?**
Redux Toolkit memudahkan pengembang dalam beberapa hal, seperti:
- Mengurangi boilerplate code.
- Mengintegrasikan middleware seperti **Redux Thunk** secara otomatis.
- Menyederhanakan penulisan reducer dengan **createSlice()**.
- Mendukung pattern logika asinkron melalui **createAsyncThunk()**.
#### **2. Instalasi Redux Toolkit**
Untuk menggunakan Redux Toolkit, kita perlu menginstalnya terlebih dahulu. Jalankan perintah berikut di terminal:
```bash
npm install @reduxjs/toolkit
#### **3. Membuat Slice dengan `createSlice()`**
Di Redux Toolkit, kita bisa membuat reducer dan action dalam satu langkah menggunakan **`createSlice()`**. Ini akan mengurangi kode yang perlu kita tulis secara signifikan.
**Contoh pembuatan slice:**
```javascript
// src/features/todos/todoSlice.js
import { createSlice } from '@reduxjs/toolkit';
const todoSlice = createSlice({
name: 'todos',
initialState: [],
reducers: {
addTodo: (state, action) => {
state.push(action.payload); // Immer digunakan di belakang layar, jadi kita bisa memodifikasi state secara langsung
},
removeTodo: (state, action) => {
return state.filter(todo => todo.id !== action.payload.id);
}
}
});
export const { addTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;
**Penjelasan:**
- `name`: Nama slice, digunakan untuk mengidentifikasi bagian state yang dikelola oleh slice ini.
- `initialState`: State awal untuk slice ini.
- `reducers`: Fungsi yang bertindak sebagai reducer untuk menangani berbagai action. Redux Toolkit menggunakan **Immer** di belakang layar, sehingga kita bisa menulis reducer seolah-olah kita memodifikasi state secara langsung.
#### **4. Membuat Store dengan Redux Toolkit**
Redux Toolkit juga menyediakan cara mudah untuk membuat store dengan middleware yang sudah terpasang (termasuk Redux Thunk).
**Contoh membuat store dengan `configureStore()`:**
```javascript
// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './features/todos/todoSlice';
const store = configureStore({
reducer: {
todos: todoReducer
}
});
export default store;
Dengan menggunakan **`configureStore()`**, kita tidak perlu lagi menambahkan middleware secara manual karena semuanya sudah dikonfigurasi otomatis.
#### **5. Menggunakan State dan Dispatch di Komponen React**
Proses mengambil state dan dispatching action di Redux Toolkit sama seperti di Redux biasa. Kita tetap menggunakan hook **`useSelector()`** dan **`useDispatch()`** dari `react-redux`.
**Contoh penggunaan Redux Toolkit di komponen:**
```javascript
// src/components/TodoList.js
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, removeTodo } from '../features/todos/todoSlice';
const TodoList = () => {
const todos = useSelector((state) => state.todos);
const dispatch = useDispatch();
const [newTodo, setNewTodo] = useState('');
const handleAddTodo = () => {
dispatch(addTodo({ id: Date.now(), text: newTodo }));
setNewTodo('');
};
const handleRemoveTodo = (id) => {
dispatch(removeTodo({ id }));
};
return (
<div>
<h1>Todo List</h1>
<ul>
{todos.map((todo) => (
<li key={todo.id}>
{todo.text} <button onClick={() => handleRemoveTodo(todo.id)}>Remove</button>
</li>
))}
</ul>
<input
type="text"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
/>
<button onClick={handleAddTodo}>Add Todo</button>
</div>
);
};
export default TodoList;
#### **6. Mengelola Logika Asinkron dengan `createAsyncThunk()`**
Redux Toolkit menyediakan cara mudah untuk menangani operasi asinkron menggunakan **`createAsyncThunk()`**. Ini adalah metode modern untuk menangani request API atau proses asinkron lain.
**Contoh menggunakan `createAsyncThunk()` untuk fetch data dari API:**
```javascript
// src/features/todos/todoSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
export const fetchTodos = createAsyncThunk(
'todos/fetchTodos',
async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos');
return response.json();
}
);
const todoSlice = createSlice({
name: 'todos',
initialState: {
todos: [],
status: 'idle',
error: null
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchTodos.pending, (state) => {
state.status = 'loading';
})
.addCase(fetchTodos.fulfilled, (state, action) => {
state.status = 'succeeded';
state.todos = action.payload;
})
.addCase(fetchTodos.rejected, (state, action) => {
state.status = 'failed';
state.error = action.error.message;
});
}
});
export default todoSlice.reducer;
**Penjelasan:**
- `fetchTodos`: Adalah thunk asinkron yang mem-fetch data dari API.
- `extraReducers`: Digunakan untuk menangani action yang dihasilkan oleh **`createAsyncThunk()`** seperti `pending`, `fulfilled`, dan `rejected`.
#### **7. Menggunakan `createAsyncThunk()` di Komponen**
Setelah thunk asinkron dibuat, kita bisa menggunakannya di komponen untuk mengambil data dari API.
**Contoh penggunaan `fetchTodos()` di komponen:**
```javascript
// src/components/TodoList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchTodos } from '../features/todos/todoSlice';
const TodoList = () => {
const { todos, status, error } = useSelector((state) => state.todos);
const dispatch = useDispatch();
useEffect(() => {
if (status === 'idle') {
dispatch(fetchTodos());
}
}, [status, dispatch]);
if (status === 'loading') {
return <div>Loading...</div>;
}
if (status === 'failed') {
return <div>Error: {error}</div>;
}
return (
<div>
<h1>Todo List</h1>
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
</div>
);
};
export default TodoList;
Dengan **Redux Toolkit**, manajemen state di aplikasi React menjadi jauh lebih mudah dan efisien. Semua langkah mulai dari pembuatan reducer, action, store, hingga operasi asinkron telah disederhanakan.
Ini adalah penutup dari modul dasar Redux & Redux Toolkit.