ReactJS - Verwaltung des Zustands mit Flux

Hallo zusammen, zukünftige React-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der Zustandsverwaltung mit Flux. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Ihr freundlicher Guide sein, und wir gehen das Schritt für Schritt durch. Am Ende dieses Tutorials werden Sie den Zustand wie ein Profi verwalten können!

Was ist Zustand und warum müssen wir ihn verwalten?

Bevor wir uns Flux zuwenden, sprechen wir über Zustand. Stellen Sie sich vor, Sie bauen eine Aufgabenliste-App. Die Liste der Aufgaben ist der "Zustand" Ihrer App. Wenn Benutzer Aufgaben hinzufügen oder entfernen, ändert sich der Zustand. Eine effiziente Verwaltung dieser Änderungen ist entscheidend für ein reibungsloses Benutzererlebnis.

Verständnis von Flux

Flux ist ein Architekturmuster, das von Facebook entwickelt wurde, um den Datenfluss in React-Anwendungen zu verwalten. Stellen Sie es sich als Verkehrshelfer für die Daten Ihrer App vor.

Die Kernkonzepte von Flux

1. Aktionen (Actions): Diese sind wie Boten, die Informationen darüber übermitteln, was in Ihrer App passiert ist.
2. Verteiler (Dispatcher): Der Verkehrshelfer, der Aktionen empfängt und an die entsprechenden Stores weiterleitet.
3. Stores: Wo die Daten und Logik Ihrer Anwendung leben.
4. Ansichten (Views): Die React-Komponenten, die die Daten aus den Stores anzeigen.

Lassen Sie uns dies mit einem einfachen Diagramm visualisieren:

Benutzerinteraktion -> Aktion -> Verteiler -> Store -> Ansicht

Implementierung von Flux: Ein Schritt-für-Schritt-Leitfaden

Schritt 1: Einrichtung Ihres Projekts

Zuerst richten wir ein neues React-Projekt ein. Öffnen Sie Ihr Terminal und führen Sie aus:

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

Schritt 2: Erstellung von Aktionen

Aktionen sind der Ausgangspunkt des Datenflusses. Lassen Sie uns eine einfache Aktion zum Hinzufügen einer Aufgabe erstellen:

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

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

Hier erstellen wir eine addTodo-Funktion, die eine Aktion mit einem Typ und dem Text der Aufgabe dispatcht.

Schritt 3: Einrichtung des Verteilers

Der Verteiler ist das zentrale Bindeglied unserer Flux-Anwendung:

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

export default new Dispatcher();

Dies erstellt eine neue Dispatcher-Instanz, die wir überall in unserer App verwenden werden.

Schritt 4: Erstellung eines Stores

Stores halten den Anwendungszustand und die Logik:

// 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:
// nichts tun
}
}
}

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

export default todoStore;

Dieser Store hört auf Aktionen, aktualisiert die Aufgabenliste und emittiert ein Änderungsereignis.

Schritt 5: Erstellung von React-Komponenten

Nun erstellen wir unsere React-Komponenten, um mit unseren Aufgaben zu interagieren und sie anzuzeigen:

// 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>Meine Aufgabenliste</h1>
<input
type="text"
value={newTodo}
onChange={handleNewTodoChange}
placeholder="Geben Sie eine neue Aufgabe ein"
/>
<button onClick={handleAddTodo}>Aufgabe hinzufügen</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}

export default TodoList;

Diese Komponente hört auf Änderungen im TodoStore, zeigt die aktuellen Aufgaben an und ermöglicht es Benutzern, neue Aufgaben hinzuzufügen.

Schritt 6: Alles zusammenfügen

Schließlich aktualisieren wir unser App.js, um unsere neue TodoList-Komponente zu verwenden:

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

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

export default App;

Fazit

Glückwunsch! Sie haben gerade eine einfache Aufgabenliste-App mit React und Flux gebaut. Lassen Sie uns zusammenfassen, was wir gelernt haben:

1. Flux ist ein Architekturmuster zur Verwaltung des Zustands in React-Anwendungen.
2. Es besteht aus Aktionen, einem Verteiler, Stores und Ansichten.
3. Der Datenfluss ist unidirektional: Aktion -> Verteiler -> Store -> Ansicht.

Dieser unidirektionale Datenfluss macht unsere App vorhersehbarer und einfacher zu debuggen. Wenn Sie größere Anwendungen erstellen, werden Sie die Struktur und Klarheit schätzen, die Flux bietet.

Denken Sie daran, dass das effektive Management des Zustands wie das Jonglieren lernen ist – es erfordert Übung, aber wenn Sie den Dreh raus haben, ist es unglaublich mächtig (und spaßig)!

Weiter codieren, neugierig bleiben und viel Spaß beim Reacten!

Credits: Image by storyset