ReactJS - 使用Flux管理状态

你好，未来的React法师们！今天，我们将踏上一段激动人心的旅程，探索使用Flux进行状态管理的世界。如果你是编程新手，不用担心——我会成为你的友好向导，我们会一步步来。在本教程结束时，你将能够像专业人士一样管理状态！

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();

这创建了一个新的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>我的待办事项列表</h1>
<input
type="text"
value={newTodo}
onChange={handleNewTodoChange}
placeholder="输入一个新的待办事项"
/>
<button onClick={handleAddTodo}>添加待办事项</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！


| Flux概念 | 描述 | 示例 |
|-----------|------|------|
| 动作（Actions） | 从应用发送数据到存储的信息载体 | `addTodo(text)` |
| 调度器（Dispatcher） | 管理Flux应用中所有数据流的中心 | `dispatcher.dispatch({ type: "ADD_TODO", text: text })` |
| 存储（Stores） | 应用状态和逻辑的容器 | `TodoStore`类 |
| 视图（Views） | 监听存储变化并重新渲染的React组件 | `TodoList`组件 |

Credits: Image by storyset