ReactJS - Mengelola State Menggunakan Flux

Hai teman-teman, para ahli React masa depan! Hari ini, kita akan memulai perjalanan yang menarik ke dunia manajemen state menggunakan Flux. Jangan khawatir jika Anda baru belajar pemrograman – saya akan menjadi panduan yang ramah, dan kita akan bergerak langkah demi langkah. Pada akhir tutorial ini, Anda akan mengelola state seperti seorang profesional!

Apa Itu State dan Mengapa Kita Harus Mengelolanya?

Sebelum kita masuk ke Flux, mari bicarakan tentang state. Bayangkan Anda sedang membuat aplikasi daftar tugas. Daftar tugas itu adalah "state" aplikasi Anda. Ketika pengguna menambahkan atau menghapus tugas, state berubah. Mengelola perubahan ini secara efisien sangat penting untuk pengalaman pengguna yang lancar.

Memahami Flux

Flux adalah pola arsitektur yang dikembangkan oleh Facebook untuk mengelola arus data dalam aplikasi React. Bayangkan ini sebagai pengatur lalu lintas untuk data aplikasi Anda.

Konsep Inti Flux

1. Actions: Ini seperti pengirim yang membawa informasi tentang apa yang terjadi dalam aplikasi Anda.
2. Dispatcher: Pengatur lalu lintas yang menerima action dan mengirimkannya ke store yang sesuai.
3. Stores: Tempat dimana data dan logika aplikasi Anda berada.
4. Views: Komponen React yang menampilkan data dari store.

Mari kita visualisasikan ini dengan diagram sederhana:

Interaksi Pengguna -> Action -> Dispatcher -> Store -> View

Implementasi Flux: Panduan Langkah demi Langkah

Langkah 1: Menyiapkan Proyek Anda

Pertama, mari kita siapkan proyek React baru. Buka terminal Anda dan jalankan:

npx create-react-app flux-todo-app
cd flux-todo-app
npm install flux

Langkah 2: Membuat Actions

Action adalah titik awal arus data. Mari kita buat action sederhana untuk menambahkan tugas:

// src/actions/TodoActions.js
import dispatcher from "../dispatcher";

export function addTodo(text) {
dispatcher.dispatch({
type: "ADD_TODO",
text: text
});
}

Di sini, kita membuat fungsi addTodo yang mengirim action dengan jenis dan teks tugas.

Langkah 3: Menyiapkan Dispatcher

Dispatcher adalah hub pusat aplikasi Flux kita:

// src/dispatcher.js
import { Dispatcher } from "flux";

export default new Dispatcher();

Ini membuat instance Dispatcher baru yang kita akan gunakan di seluruh aplikasi.

Langkah 4: Membuat Store

Store menyimpan state dan logika aplikasi:

// src/stores/TodoStore.js
import { EventEmitter } from "events";
import dispatcher from "../dispatcher";

class TodoStore extends EventEmitter {
constructor() {
super();
this.todos = [];
}

createTodo(text) {
const id = Date.now();
this.todos.push({
id,
text,
complete: false
});
this.emit("change");
}

getAll() {
return this.todos;
}

handleActions(action) {
switch(action.type) {
case "ADD_TODO":
this.createTodo(action.text);
break;
default:
// do nothing
}
}
}

const todoStore = new TodoStore();
dispatcher.register(todoStore.handleActions.bind(todoStore));

export default todoStore;

Store ini mendengarkan action, memperbarui daftar tugas, dan mengirimkan event perubahan.

Langkah 5: Membuat Komponen React

Sekarang, mari kita buat komponen React kita untuk menampilkan dan berinteraksi dengan tugas-tugas kita:

// src/components/TodoList.js
import React, { useState, useEffect } from 'react';
import TodoStore from '../stores/TodoStore';
import { addTodo } from '../actions/TodoActions';

function TodoList() {
const [todos, setTodos] = useState(TodoStore.getAll());
const [newTodo, setNewTodo] = useState('');

useEffect(() => {
TodoStore.on("change", () => {
setTodos(TodoStore.getAll());
});
}, []);

const handleNewTodoChange = (e) => {
setNewTodo(e.target.value);
};

const handleAddTodo = () => {
addTodo(newTodo);
setNewTodo('');
};

return (
<div>
<h1>Daftar Tugas Saya</h1>
<input
type="text"
value={newTodo}
onChange={handleNewTodoChange}
placeholder="Masukkan tugas baru"
/>
<button onClick={handleAddTodo}>Tambah Tugas</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}

export default TodoList;

Komponen ini mendengarkan perubahan di TodoStore, menampilkan tugas saat ini, dan memungkinkan pengguna menambahkan tugas baru.

Langkah 6: Menggabungkan Semua

Akhirnya, mari kita perbarui App.js untuk menggunakan komponen TodoList baru kita:

// src/App.js
import React from 'react';
import TodoList from './components/TodoList';

function App() {
return (
<div className="App">
<TodoList />
</div>
);
}

export default App;

Kesimpulan

Selamat! Anda telah membuat aplikasi tugas sederhana menggunakan React dan Flux. Mari rangkum apa yang kita pelajari:

1. Flux adalah arsitektur untuk mengelola state dalam aplikasi React.
2. Itu terdiri dari Actions, Dispatcher, Stores, dan Views.
3. Data mengalir dalam satu arah: Action -> Dispatcher -> Store -> View.

Aliran data unidireksional ini membuat aplikasi kita lebih prediktif dan mudah didebug. Saat Anda membuat aplikasi yang lebih besar, Anda akan menghargai struktur dan kejelasan yang Flux memberikan.

Ingat, belajar untuk mengelola state secara efektif adalah seperti belajar jongkok – itu memerlukan latihan, tapi sekali Anda menguasainya, itu sangat kuat (dan menyenangkan)!

Tetap mengoding, tetap curiga, dan selamat ber-React!

Credits: Image by storyset