ReactJS - Управление состоянием с использованием Flux

Здравствуйте, будущие маги React! Сегодня мы отправимся в увлекательное путешествие в мир управления состоянием с использованием Flux. Не волнуйтесь, если вы новички в программировании – я буду вашим доброжелательным проводником, и мы будем двигаться шаг за шагом. К концу этого учебника вы будете управлять состоянием как профессионал!

Что такое состояние и почему我们需要 управлять им?

Прежде чем мы погрузимся в Flux, давайте поговорим о состоянии. Представьте, что вы создаете приложение для списка задач. Сам список задач – это "состояние" вашего приложения. По мере того как пользователи добавляют или удаляют задачи, состояние изменяется. Эффективное управление этими изменениями имеет решающее значение для плавного пользовательского опыта.

Понимание Flux

Flux – это архитектурный паттерн, разработанный Facebook для управления потоком данных в приложениях React. Представьте его как диспетчера для данных вашего приложения.

Основные концепции Flux

1. Действия (Actions): Это как messengers, несущие информацию о том, что произошло в вашем приложении.
2. Диспетчер (Dispatcher): Это диспетчер, который принимает действия и отправляет их в соответствующие хранилища.
3. Хранилища (Stores): Места, где хранятся данные и логика вашего приложения.
4. Виды (Views): React компоненты, которые отображают данные из хранилищ.

Давайте visualize это с помощью простого diagramma:

Пользовательское взаимодействие -> Действие -> Диспетчер -> Хранилище -> Вид

Реализация Flux: Пошаговое руководство

Шаг 1: Настройка вашего проекта

Сначала давайте настроим новый проект React. Откройте ваш terminal и выполните:

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, которая dispatch-ит действие с типом и текстом задачи.

Шаг 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:
// не делать ничего
}
}
}

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

export default todoStore;

Это хранилище слушает действия, обновляет список задач и инициирует событие "change".

Шаг 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. Давайте подведем итоги того, что мы узнали:

1. Flux – это архитектурный паттерн для управления состоянием в приложениях React.
2. Он состоит из Действий, Диспетчера, Хранилищ и Видов.
3. Данные流动 в одном направлении: Действие -> Диспетчер -> Хранилище -> Вид.

Этот单向ный поток данных делает наше приложение более предсказуемым и легким для отладки. По мере создания более крупных приложений, вы оцените структуру и clarity, которые предоставляет Flux.

помните, что обучение эффективному управлению состоянием похоже на обучение жонглировать – это требует практики, но как только вы научитесь, это becomes incredibly powerful (и fun)!

Продолжайте программировать, stay curious, и happy React-ing!

Credits: Image by storyset