ReactJS - 使用Flux管理狀態

Hello there, future React wizards! Today, we're going to embark on an exciting journey into the world of state management using Flux. Don't worry if you're new to programming – I'll be your friendly guide, and we'll take this step by step. By the end of this tutorial, you'll be managing state like a pro!

ReactJS - Managing State Using Flux

什麼是狀態，為什麼我們需要管理它？

在我們深入研究Flux之前，讓我們先來談談狀態。想像你正在建立一個待辦事項列表應用。待辦事項的列表就是你的應用程序的"狀態"。當用戶添加或刪除待辦事項時，狀態會發生變化。有效地管理這些變化對於提供順暢的用戶體驗至關重要。

了解Flux

Flux是由Facebook開發的一種架構模式，用以管理React應用程序中的數據流。把它想像成你應用程序數據的流量控制器。

Flux的核心概念

動作（Actions）：這些就像傳遞應用程序中發生的事情信息的信使。
分發器（Dispatcher）：接收動作並將其發送到相應存儲的交通控制器。
存儲（Stores）：應用程序數據和邏輯的所在地。
視圖（Views）：顯示存儲中數據的React組件。

讓我們用一個簡單的圖表來形象化這個過程：

用戶交互 -> 動作 -> 分發器 -> 存儲 -> 視圖

實現Flux：一步步指南

步驟1：設置你的項目

首先，讓我們設置一個新的React項目。打開你的終端並運行以下命令：

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

步驟2：創建動作

動作是數據流的開始點。讓我們創建一個用於添加待辦事項的簡單動作：

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

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

在這裡，我們創建了一個addTodo函數，它發送一個包含類型和待辦事項文本的動作。

步驟3：設置分發器

分發器是我們Flux應用的中心樞紐：

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

export default new Dispatcher();

這樣我們就創建了一個分發器實例，我們將在整個應用程序中使用它。

步驟4：創建存儲

存儲保存應用程序狀態和邏輯：

// 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;

這個存儲聆聽動作，更新待辦事項列表，並發出變化事件。

步驟5：創建React組件

現在，讓我們創建我們的React組件以顯示和與我們的待辦事項交互：

// 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>My Todo List</h1>
<input
type="text"
value={newTodo}
onChange={handleNewTodoChange}
placeholder="Enter a new todo"
/>
<button onClick={handleAddTodo}>Add Todo</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}

export default TodoList;

這個組件聆聽TodoStore的變化，顯示當前的待辦事項，並允許用戶添加新的待辦事項。

步驟6：將所有東西整合在一起

最後，讓我們更新我們的App.js以使用我們新的TodoList組件：

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

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

export default App;

結論

恭喜你！你剛剛使用React和Flux建立了一個簡單的待辦事項應用。讓我們回顧一下我們學到了什麼：

Flux是管理React應用程序狀態的一種架構模式。
它由動作、分發器、存儲和視圖組成。
數據以一個方向流動：動作 -> 分發器 -> 存儲 -> 視圖。

這種單向數據流使我們的應用程序更可預測，更容易調試。當你建立更大的應用程序時，你會感激Flux提供的結構和清晰度。

記住，學會有效地管理狀態就像學會玩雜耍一樣——它需要練習，但一旦你掌握了它，它就非常強大（而且樂趣無窮）！

繼續編程，保持好奇心，並且快樂地使用React！

Credits: Image by storyset