#### 1. **Apa itu Redux?**
Redux adalah pustaka **state management** yang digunakan untuk mengelola dan mengorganisir state dalam aplikasi JavaScript, terutama yang dibangun dengan React. Redux membantu menyederhanakan manajemen state yang kompleks dalam aplikasi besar.
#### 2. **Komponen Utama dalam Redux:**
- **Actions**
- **Reducers**
- **Store**
#### **2.1 Actions**
**Action** adalah objek JavaScript yang digunakan untuk mengirimkan data dari aplikasi ke store Redux. Setiap action harus memiliki properti `type` yang mendefinisikan jenis action yang terjadi, dan dapat memiliki properti lain untuk membawa data yang dibutuhkan (payload).
**Contoh action:**
```javascript
{
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Belajar Redux'
}
}
- `type`: Menjelaskan jenis action yang dilakukan (misalnya, menambah todo baru).
- `payload`: Data yang diperlukan untuk memperbarui state (dalam hal ini, todo baru).
**Action Creator**: Fungsi yang mengembalikan action. Ini digunakan untuk membuat action lebih mudah dan konsisten.
```javascript
const addTodo = (text) => {
return {
type: 'ADD_TODO',
payload: { text }
};
};
#### **2.2 Reducers**
**Reducer** adalah fungsi yang menerima state saat ini dan action, lalu menghasilkan state baru berdasarkan action tersebut. Reducer bersifat **pure function**, artinya mereka tidak boleh mengubah state secara langsung, tetapi harus membuat salinan state baru.
**Contoh reducer:**
```javascript
const initialState = {
todos: []
};
const todoReducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, action.payload]
};
default:
return state;
}
};
- **State**: Merupakan data dari aplikasi yang disimpan.
- **Action**: Dikirim ke reducer untuk menginformasikan perubahan yang perlu dilakukan pada state.
- **Switch**: Digunakan untuk menangani berbagai jenis action.
#### **2.3 Store**
**Store** adalah tempat penyimpanan seluruh state aplikasi. Store mengelola dan mengorganisir state dari seluruh aplikasi, serta memberikan akses ke state dan memungkinkan untuk mengirim action untuk memodifikasi state.
**Membuat Store:**
```javascript
import { createStore } from 'redux';
import todoReducer from './reducers/todoReducer';
const store = createStore(todoReducer);
- `createStore()`: Fungsi dari Redux yang digunakan untuk membuat store.
- **Dispatch**: Mengirim action ke store untuk memperbarui state aplikasi.
**Contoh Dispatch Action:**
```javascript
store.dispatch(addTodo('Belajar Redux'));
Setelah action dikirim melalui `dispatch`, reducer akan memprosesnya, dan store akan menyimpan state terbaru.
#### **Alur Kerja Redux:**
1. **Action**: Pengguna atau aplikasi mengirimkan action untuk melakukan sesuatu, misalnya menambah data.
2. **Reducer**: Action tersebut dikirim ke reducer yang mengembalikan state baru berdasarkan action.
3. **Store**: State baru tersebut disimpan dalam store, yang mengatur semua data aplikasi.
Dengan memahami dasar Redux ini, kamu akan lebih mudah memahami cara kerja manajemen state dalam aplikasi besar. Pada materi selanjutnya, kita akan membahas tentang **Middleware**, **Thunk**, dan **Redux Toolkit** yang menyederhanakan cara kerja Redux lebih lanjut.