### **Materi 2: Konfigurasi Redux di React**
Setelah memahami dasar-dasar Redux (actions, reducers, dan store), langkah selanjutnya adalah mengintegrasikan Redux ke dalam aplikasi React. Berikut adalah langkah-langkah konfigurasi Redux di proyek React:
#### **1. Instalasi Redux dan React-Redux**
Untuk menggunakan Redux di dalam React, kita memerlukan dua pustaka:
- **`redux`**: Pustaka utama Redux.
- **`react-redux`**: Pustaka yang menyediakan binding antara React dan Redux.
Jalankan perintah berikut di terminal untuk menginstal kedua pustaka:
```bash
npm install redux react-redux
```
#### **2. Membuat Reducer**
Reducer adalah fungsi yang bertanggung jawab untuk mengubah state berdasarkan action yang diterima. Pertama-tama, buat reducer sederhana.
**Contoh reducer:**
```javascript
// src/reducers/todoReducer.js
const initialState = {
todos: []
};
const todoReducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, action.payload]
};
default:
return state;
}
};
export default todoReducer;
#### **3. Membuat Store**
Store adalah tempat penyimpanan global untuk seluruh state aplikasi. Di React, kita dapat membuat store dengan menggabungkan reducer menggunakan `createStore()`.
**Contoh membuat store:**
```javascript
// src/store.js
import { createStore } from 'redux';
import todoReducer from './reducers/todoReducer';
const store = createStore(todoReducer);
export default store;
```
#### **4. Menghubungkan Store ke Aplikasi React**
Untuk menghubungkan store ke aplikasi React, gunakan komponen **`<Provider>`** dari pustaka `react-redux`. Komponen ini digunakan untuk menyediakan store ke seluruh komponen di aplikasi React.
**Contoh pengaturan store di aplikasi utama:**
```javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store'; // Import store yang sudah kita buat
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Dengan menggunakan **`<Provider>`**, seluruh komponen di dalam aplikasi akan memiliki akses ke store Redux.
#### **5. Menggunakan State dan Dispatch di Komponen**
Setelah store dihubungkan ke aplikasi, kita bisa menggunakan **state** dan **dispatch action** dalam komponen-komponen React dengan bantuan dua hook penting dari `react-redux`:
- **`useSelector()`**: Untuk mengambil state dari store.
- **`useDispatch()`**: Untuk mengirim action ke store.
**Contoh penggunaan `useSelector()` dan `useDispatch()`:**
```javascript
// src/components/TodoList.js
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
const TodoList = () => {
const todos = useSelector((state) => state.todos); // Mengambil todos dari state
const dispatch = useDispatch(); // Hook untuk dispatch action
const [newTodo, setNewTodo] = useState('');
const addTodo = () => {
dispatch({
type: 'ADD_TODO',
payload: { text: newTodo }
});
setNewTodo('');
};
return (
<div>
<h1>Todo List</h1>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo.text}</li>
))}
</ul>
<input
type="text"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
/>
<button onClick={addTodo}>Add Todo</button>
</div>
);
};
export default TodoList;
#### **6. Testing Aplikasi Redux dengan React**
Setelah semuanya dikonfigurasi, aplikasi React kamu sudah bisa bekerja dengan Redux. Berikut adalah rangkuman cara kerja aplikasi ini:
1. **State** dikelola oleh Redux dan dapat diakses di seluruh aplikasi.
2. Setiap kali action dikirim menggunakan **`dispatch()`**, reducer akan mengubah state sesuai dengan action tersebut.
3. Komponen React mengambil state yang di-update menggunakan **`useSelector()`** dan menampilkannya.
Dengan konfigurasi ini, Redux akan berjalan mulus di aplikasi React kamu. Selanjutnya, kita bisa membahas **Middleware** seperti **Thunk** atau mulai menggunakan **Redux Toolkit (RTK)** yang menyederhanakan banyak langkah di atas.