Setelah berhasil mengonfigurasi Redux di aplikasi React, sekarang kita akan membahas **middleware** yang berfungsi untuk menangani logika asinkron seperti pengambilan data dari API. Salah satu middleware yang paling umum digunakan dalam Redux adalah **Redux Thunk**.
#### **1. Apa itu Middleware?**
Middleware di Redux adalah lapisan fungsi yang berada di antara dispatching action dan reducer. Middleware memungkinkan kita untuk memperluas kemampuan Redux, seperti melakukan operasi asinkron atau mencatat log dari setiap action yang dikirim.
#### **2. Pengenalan Redux Thunk**
**Redux Thunk** adalah middleware yang memungkinkan kita untuk menulis action creator yang mengembalikan fungsi (bukan action biasa). Ini sangat berguna ketika kita perlu menjalankan logika asinkron, seperti melakukan request ke API sebelum mengirim action ke reducer.
**Instalasi Redux Thunk:**
```bash
npm install redux-thunk
#### **3. Mengonfigurasi Redux Thunk**
Setelah menginstal Redux Thunk, kita perlu menambahkannya ke store Redux. Gunakan fungsi **`applyMiddleware()`** dari Redux untuk memasukkan thunk ke dalam store.
**Contoh konfigurasi store dengan Redux Thunk:**
```javascript
// src/store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import todoReducer from './reducers/todoReducer';
const store = createStore(todoReducer, applyMiddleware(thunk));
export default store;
#### **4. Menggunakan Redux Thunk untuk Logika Asinkron**
Untuk memahami bagaimana thunk bekerja, mari kita buat action creator yang akan melakukan fetch data dari API secara asinkron. Misalnya, kita akan mengambil daftar *todos* dari API dan mengirim action setelah data diterima.
**Contoh action creator dengan Redux Thunk:**
```javascript
// src/actions/todoActions.js
export const fetchTodos = () => {
return async (dispatch) => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos');
const data = await response.json();
dispatch({
type: 'FETCH_TODOS_SUCCESS',
payload: data
});
} catch (error) {
dispatch({
type: 'FETCH_TODOS_ERROR',
payload: error
});
}
};
};
Dalam contoh ini:
- Action creator **`fetchTodos()`** mengembalikan fungsi yang menerima `dispatch` sebagai argumen.
- Di dalam fungsi tersebut, kita melakukan **fetch** data dari API secara asinkron.
- Setelah data diterima, kita mengirim action `FETCH_TODOS_SUCCESS` dengan payload berupa data yang diterima.
- Jika terjadi error, kita bisa mengirim action `FETCH_TODOS_ERROR`.
#### **5. Menangani Action di Reducer**
Setelah action berhasil dikirim, kita perlu menangani action tersebut di reducer. Tambahkan case untuk action `FETCH_TODOS_SUCCESS` dan `FETCH_TODOS_ERROR`.
**Contoh penambahan case di reducer:**
```javascript
// src/reducers/todoReducer.js
const initialState = {
todos: [],
error: null
};
const todoReducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_TODOS_SUCCESS':
return {
...state,
todos: action.payload
};
case 'FETCH_TODOS_ERROR':
return {
...state,
error: action.payload
};
default:
return state;
}
};
export default todoReducer;
#### **6. Menggunakan Action di Komponen React**
Sekarang kita bisa menggunakan action creator `fetchTodos()` di dalam komponen React. Gunakan **`useDispatch()`** untuk memanggil action, dan **`useSelector()`** untuk mengambil state dari Redux.
**Contoh penggunaan `fetchTodos()` di komponen:**
```javascript
// src/components/TodoList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchTodos } from '../actions/todoActions';
const TodoList = () => {
const todos = useSelector((state) => state.todos);
const error = useSelector((state) => state.error);
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchTodos()); // Memanggil fetchTodos ketika komponen mount
}, [dispatch]);
if (error) {
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;
#### **7. Testing Redux Thunk**
Saat aplikasi dijalankan, komponen **`TodoList`** akan secara otomatis memanggil action **`fetchTodos()`** ketika komponen dimuat (mount). Data yang diambil dari API akan disimpan dalam state Redux dan ditampilkan di UI. Jika terjadi error saat pengambilan data, pesan error akan muncul di layar.
Dengan ini, kamu telah berhasil mengintegrasikan Redux Thunk untuk menangani logika asinkron di aplikasi React. Pada materi selanjutnya, kita akan membahas **Redux Toolkit (RTK)**, yang merupakan cara modern untuk mengelola state di Redux dengan sintaks yang lebih sederhana.
Apakah ingin lanjut ke pembahasan **Redux Toolkit (RTK)**?