ReactJS - Menguruskan Keadaan Menggunakan Flux

Hai sana, para ahli React masa depan! Hari ini, kita akan melangkah ke dalam dunia pengurusan keadaan menggunakan Flux. Jangan bimbang jika anda baru dalam bidang programming - saya akan menjadi panduannya yang ramah, dan kita akan mengambil langkah demi langkah. Pada akhir panduan ini, anda akan menguruskan keadaan seperti seorang profesional!

Apa Itu Keadaan dan Mengapa Kita Perlu Menguruskan Ia?

Sebelum kita masuk ke Flux, mari bicarakan tentang keadaan. Bayangkan anda sedang membina aplikasi senarai tugasan. Senarai tugasan itu adalah "keadaan" aplikasi anda. Sebagai pengguna menambah atau menghapus tugasan, keadaan berubah. Pengurusan perubahan ini secara efektif adalah penting bagi memberikan pengalaman pengguna yang lancar.

Memahami Flux

Flux adalah corak rekabentuk yang dibangunkan oleh Facebook untuk menguruskan aliran data dalam aplikasi React. Anggapkan ia sebagai pengawal lalu lintas untuk data aplikasi anda.

Konsep Asas Flux

1. Aksi: Seperti pengiring yang membawa maklumat tentang apa yang berlaku dalam aplikasi anda.
2. Penghantar: Pengawal lalu lintas yang menerima aksi dan menghantarkannya ke stor yang sesuai.
3. Stor: Tempat di mana data dan logik aplikasi anda tinggal.
4. Paparan: Komponen React yang memaparkan data dari stor.

Mari kita visualisasikan ini dengan diagram ringkas:

Interaksi Pengguna -> Aksi -> Penghantar -> Stor -> Paparan

Implementasi Flux: Panduan Langkah demi Langkah

Langkah 1: Menyiapkan Projek Anda

Pertama, mari kita siapkan projek React baru. Buka terminal anda dan jalankan:

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

Langkah 2: Membuat Aksi

Aksi adalah titik permulaan aliran data. Mari kita buat aksi ringkas untuk menambah tugasan:

// 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 menghantar aksi dengan jenis dan teks tugasan.

Langkah 3: Menyiapkan Penghantar

Penghantar adalah hab utama aplikasi Flux kita:

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

export default new Dispatcher();

Ini mencipta instance Penghantar baru yang akan kita gunakan di seluruh aplikasi.

Langkah 4: Membuat Stor

Stor menyimpan keadaan dan logik 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:
// jangan lakukan apa-apa
}
}
}

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

export default todoStore;

Stor ini mendengar aksi, mengemaskini senarai tugasan, dan menghantar perubahan.

Langkah 5: Membuat Komponen React

Sekarang, mari kita buat komponen React kita untuk memaparkan dan berinteraksi dengan tugasan 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>Senarai Tugasan Saya</h1>
<input
type="text"
value={newTodo}
onChange={handleNewTodoChange}
placeholder="Masukkan tugasan baru"
/>
<button onClick={handleAddTodo}>Tambah Tugasan</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}

export default TodoList;

Komponen ini mendengar perubahan dalam TodoStore, memaparkan tugasan semasa, dan membolehkan pengguna menambah tugasan baru.

Langkah 6: Menggabungkan Semua

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

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

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

export default App;

Kesimpulan

Tahniah! Anda telah membina aplikasi tugasan ringkas menggunakan React dan Flux. Mari ringkaskan apa yang kita telah belajar:

1. Flux adalah corak rekabentuk untuk menguruskan keadaan dalam aplikasi React.
2. Ia terdiri daripada Aksi, Penghantar, Stor, dan Paparan.
3. Data mengalir dalam satu arah: Aksi -> Penghantar -> Stor -> Paparan.

Aliran data unidireksional ini menjadikan aplikasi kita lebih mudah diprediksi dan mudah diperiksa. Sebagai anda membina aplikasi yang lebih besar, anda akan menghargai struktur dan kejelasan yang Flux menyediakan.

Ingat, belajar untuk menguruskan keadaan secara efektif adalah seperti belajar untuk jongkang - ia memerlukan latihan, tetapi sekali anda mengenalinya, ia adalah amat berkuasa (dan menikmati)!

Terus kod, kekal curius, dan selamat React-ing!

Credits: Image by storyset