ReactJS - Quản lý Trạng thái Sử dụng Flux

Xin chào các pháp sư React tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy thú vị vào thế giới quản lý trạng thái sử dụng Flux. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ quản lý trạng thái như một chuyên gia!

ReactJS - Managing State Using Flux

Trạng thái là gì và tại sao chúng ta cần quản lý nó?

Trước khi chúng ta nhảy vào Flux, hãy nói về trạng thái. Hãy tưởng tượng bạn đang xây dựng một ứng dụng danh sách công việc. Danh sách các công việc là "trạng thái" của ứng dụng bạn. Khi người dùng thêm hoặc xóa công việc, trạng thái thay đổi. Quản lý những thay đổi này một cách hiệu quả là rất quan trọng cho một trải nghiệm người dùng mượt mà.

Hiểu về Flux

Flux là một mẫu kiến trúc được phát triển bởi Facebook để quản lý luồng dữ liệu trong các ứng dụng React. Hãy tưởng tượng nó như một người điều khiển giao thông cho dữ liệu của ứng dụng bạn.

Các Khái niệm Cốt Lõi của Flux

Actions: Những người mang tin nhắn chứa thông tin về những gì đã xảy ra trong ứng dụng của bạn.
Dispatcher: Người điều khiển giao thông nhận các hành động và gửi chúng đến các cửa hàng phù hợp.
Stores: Địa điểm lưu trữ dữ liệu và logic của ứng dụng bạn.
Views: Các thành phần React hiển thị dữ liệu từ các cửa hàng.

Hãy tưởng tượng điều này với một sơ đồ đơn giản:

tương tác người dùng -> Action -> Dispatcher -> Store -> View

Triển khai Flux: Hướng dẫn từng bước

Bước 1: Thiết lập Dự án của Bạn

Đầu tiên, hãy thiết lập một dự án React mới. Mở terminal của bạn và chạy:

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

Bước 2: Tạo Actions

Actions là điểm bắt đầu của luồng dữ liệu. Hãy tạo một hành động đơn giản để thêm một công việc:

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

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

Ở đây, chúng ta đang tạo một hàm addTodo dispatch một hành động với một loại và văn bản công việc.

Bước 3: Thiết lập Dispatcher

Dispatcher là trung tâm của ứng dụng Flux của chúng ta:

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

export default new Dispatcher();

Điều này tạo ra một thể hiện mới của Dispatcher mà chúng ta sẽ sử dụng suốt ứng dụng.

Bước 4: Tạo một Cửa hàng

Cửa hàng giữ trạng thái và logic của ứng dụng:

// 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:
// không làm gì cả
}
}
}

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

export default todoStore;

Cửa hàng này lắng nghe các hành động, cập nhật danh sách công việc và phát ra sự kiện thay đổi.

Bước 5: Tạo các Thành phần React

Bây giờ, hãy tạo các thành phần React để hiển thị và tương tác với các công việc của chúng ta:

// 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>Danh sách Công việc của tôi</h1>
<input
type="text"
value={newTodo}
onChange={handleNewTodoChange}
placeholder="Nhập một công việc mới"
/>
<button onClick={handleAddTodo}>Thêm Công việc</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}

export default TodoList;

Thành phần này lắng nghe các thay đổi trong TodoStore, hiển thị các công việc hiện tại và cho phép người dùng thêm các công việc mới.

Bước 6: Kết hợp tất cả lại với nhau

Cuối cùng, hãy cập nhật App.js để sử dụng thành phần TodoList mới của chúng ta:

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

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

export default App;

Kết luận

Chúc mừng! Bạn vừa xây dựng xong một ứng dụng danh sách công việc đơn giản sử dụng React và Flux. Hãy tóm tắt những gì chúng ta đã học:

Flux là một mẫu kiến trúc để quản lý trạng thái trong các ứng dụng React.
Nó bao gồm Actions, Dispatcher, Stores và Views.
Dữ liệu lưu thông theo một hướng: Action -> Dispatcher -> Store -> View.

Luồng dữ liệu một chiều này làm cho ứng dụng của chúng ta dễ dự đoán và dễ gỡ lỗi hơn. Khi bạn xây dựng các ứng dụng lớn hơn, bạn sẽ đánh giá cao cấu trúc và sự rõ ràng mà Flux mang lại.

Nhớ rằng, học cách quản lý trạng thái hiệu quả giống như học cách chơi đĩa - nó đòi hỏi sự tập luyện, nhưng một khi bạn đã thành thạo, nó rất mạnh mẽ (và vui vẻ)!

Tiếp tục lập mã, 保持好奇心, và chúc bạn may mắn với React!

Credits: Image by storyset