Verwaltung von Staat Reagieren Mit Unausgesprochenen,

0
27

Wie Ihre Anwendung wird komplexer, das management der staatlichen langweilig werden kann. Eine Komponente im Zustand ” soll in sich geschlossen sein, wodurch die Freigabe des Zustands über mehrere Komponenten Kopfschmerzen. Redux ist in der Regel die go-to-Bibliothek zum verwalten der Staat Reagieren, aber je nachdem, wie Komplex deine Anwendung ist, müssen Sie möglicherweise nicht Redux.

Unausgesprochene ist eine alternative, die Sie mit der Funktionalität zum verwalten Status über mehrere Komponenten mit einer Container-Klasse und-Anbieter Abonnieren und Komponenten. Mal sehen, Unausgesprochenen, in Aktion, indem Sie erstellen einen einfachen Zähler, und betrachten Sie eine erweiterte to-do-Anwendung.

Mit Unausgesprochenen, einen Zähler Erstellen

Der code für den Zähler, die wir erstellen ist verfügbar auf GitHub:

Ansicht Repo

Sie können hinzufügen, Unausgesprochenen, um Ihre Anwendung mit dem Garn:

Garn hinzufügen unterschätzt
Container

Der container erstreckt sich nicht genannten Container-Klasse. Es ist nur für Staatliche Verwaltung. Dies ist, wo der Anfangszustand initialisiert wird, und der Aufruf von setState() passieren wird.

import { Container } aus ‘unausgesprochene’

Klasse CounterContainer extends Container {
state = {
Anzahl: 0
}

increment = () => {
diese.setState({ count: dies.Zustand.count + 1 })
}

decrement = () => {
diese.setState({ count: dies.Zustand.count – 1 })
}
}

export Standard-CounterContainer

Bisher haben wir definiert den Container (CounterContainer), legen Sie seinen Anfangsstatus für die Anzahl der bei der Zahl null und definiert Methoden zum hinzufügen und entfernen, um die Komponente den Zustand in Schritten und verringert einer.

Sie Fragen sich vielleicht, warum wir noch nicht importiert Reagieren an diesem Punkt. Es gibt keine Notwendigkeit, importieren Sie es in den Container, da wir nicht Rendern JSX an alle.

Veranstaltungen-Strahler verwendet werden, um call-setState() und führen die Komponenten neu Rendern. Die Komponenten, die Gebrauch machen von diesem container zu abonnieren.

Abonnieren

Die Subscribe-Komponente wird verwendet, um den Stecker des Staates in die Komponenten, die Sie benötigen. Von hier aus werden wir fähig sein, rufen Sie die Inkrement-und Dekrement-Methoden, die aktualisiert den Zustand der Anwendung und verursachen die gezeichneten Komponenten neu Rendern mit den korrekten Zählung. Diese Methoden werden ausgelöst, indem ein paar von Tasten, die Ereignisse enthalten Zuhörer zu addieren oder zu subtrahieren, um die Anzahl, beziehungsweise.

importieren Reagieren von ‘reagieren’
import { Abonnieren,} aus ‘unausgesprochene’

import CounterContainer von ‘./Container/counter’

const Counter = () => {
return (
<Abonnieren={[CounterContainer]}>
{counterContainer => (
<div>
<div>
// Den aktuellen count-Wert
Count: { counterContainer.Zustand.Zählung }
</div>
// Diese Schaltfläche hinzufügen, um die Anzahl
<button onClick={counterContainer.Inkrement}>Increment</button>
// Mit dieser Taste verringern Sie die Anzahl
<button onClick={counterContainer.Dekrementieren}>Decrement</button>
</div>
)}
</Subscribe>
)
}

export-Standard-Zähler

Die Subscribe-Komponente ist angesichts der CounterContainer in form eines Arrays zu seiner Stütze. Dies bedeutet, dass die Abonnieren-Komponente abonnieren können mehr als ein container, und alle Container übergeben werden, um die zu stützen, der Abonnieren Komponente in einem array.

Die counterContainer ist eine Funktion, die Sie empfängt, eine Instanz von jedem container die Subscribe-Komponente abonniert.

Mit, dass, können wir nun auf den Zustand und die Methoden zur Verfügung, die in die container.

Anbieter

Wir nutzen die Provider-Komponente zum speichern der container-Instanzen und lassen Sie die Kinder zu abonnieren.

importieren Reagieren, { Component } von ‘reagieren’;
import { Provider } aus ‘unausgesprochene’

import Counter from ‘./Gegen’

Klasse App extends Component {
render() {
return (
<Provider>
<Counter />
</Provider>
);
}
}

export Standard-App;

Mit diesem, wird der Zähler-Komponente nutzen unseren counterContainer.

Unausgesprochene ermöglicht Ihnen, nutzen Sie alle Funktionen, die Reagieren, die setState() liefert. Zum Beispiel, wenn wir wollen, erhöhen Sie den vorherigen Zustand mit einer drei mal mit einem Klick, können wir übergeben eine Funktion setState() wie folgt:

incrementBy3 = () => {
diese.setState((prevState) => ({ count: prevState.count + 1 }))
diese.setState((prevState) => ({ count: prevState.count + 1 }))
diese.setState((prevState) => ({ count: prevState.count + 1 }))
}

Die Idee ist, dass die setState() funktioniert immer noch wie es funktioniert, aber dieses mal mit der Fähigkeit zu halten, die Staat, die in einer Container-Klasse. Es wird einfach zu verbreiten, den Staat, um nur die Komponenten, die Sie benötigen.

Machen wir eine To-Do-Anwendung!

Dies ist eine etwas erweiterte Nutzung Unterschätzt werden. Zwei Komponenten werden abonnieren Sie den container, die verwalten alle der Staat, und die Methoden für die Aktualisierung der Staat. Nochmal, der code ist verfügbar auf Github:

Ansicht Repo

Der container wird wie folgt Aussehen:

import { Container } aus ‘unausgesprochene’

Klasse TodoContainer extends Container {
state = {
todos: [
‘Mess around mit unausgesprochenen’,
‘Start-Tanz-Klasse’
],
todo:”
};

handleDeleteTodo = (todo) => {
diese.setState({
todos: dies.Zustand.todos.filter(c => c !== todo)
})
}

handleInputChange = (event) => {
const todo = event.Ziel.Wert
diese.setState({ todo });
};

handleAddTodo = (event) => {
event.preventDefault()
diese.setState(({Aufgaben}) => ({
todos: todos.concat (.Zustand.todo)
}))
diese.setState({ todo: “});
}

}

export Standard-TodoContainer

Der container hat eine erste todo-Liste Stand, das ist ein array mit zwei Elementen in es. Zum hinzufügen von to-do-Elemente, haben wir eine todo-Staat auf einen leeren string gesetzt.

Wir gehen zu müssen, um eine CreateTodo Komponente, abonnieren Sie den container. Jedes mal, wenn ein Wert eingegeben wird, wird das onChange-Ereignis wird ausgelöst, dann Feuer die handleInputChange () – Methode haben wir in den container. Klick auf den submit-button ausgelöst wird handleAddTodo(). Die handleDeleteTodo () – Methode erhält eine zu-tun-und-Filter, die aus der to-do -, dass übereinstimmt, die an es übergeben.

importieren Reagieren von ‘reagieren’
import { Abonnieren,} aus ‘unausgesprochene’

import TodoContainer von ‘./Container/todoContainer’

const CreateTodo = () => {
return (
<div>
<Abonnieren={[TodoContainer]}>
{todos =>
<div>
<form onSubmit={todos.handleAddTodo}>
<input
type=”text”
Wert={todos.Zustand.todo}
onChange={todos.handleInputChange}
/>
<button>Abschicken</button>
</form>
</div>
}
</Subscribe>
</div>
);
}

export Standard-CreateTodo

Wenn eine neue Aufgabe Hinzugefügt wird, die todos Zustand zur Verfügung gestellt, die in den container aktualisiert wird. Die Liste der todos ist gezogen aus dem container auf die todo-Liste Bauteil, und abonnieren Sie die Komponente dem container.

importieren Reagieren von ‘reagieren’;
import { Abonnieren,} aus ‘unausgesprochene’;

import TodoContainer von ‘./Container/todoContainer’

const Todos = () => (
<ul>
<Abonnieren={[TodoContainer]}>
{todos =>
todos.Zustand.todos.anzeigen(todo => (
<li key={todo}>
{todo} <button onClick={() => todo-Liste.handleDeleteTodo(todo)}>X</button>
</li>
))
}
</Subscribe>
</ul>
);

export Standard-Todos

Diese Komponente Schleifen durch das array von to-dos verfügbar in den container und stellt Sie in einer Liste.

Schließlich müssen wir wickeln Sie die Komponenten, abonnieren Sie den container in einen provider, wie wir es in dem Fall von der Theke. Wir tun dies in unserer App.js Datei genau, wie wir es in der Zähler-Beispiel:

importieren Reagieren, { Component } von ‘reagieren’;
import { Provider } aus ‘unausgesprochene’

import CreateTodo von ‘./CreateTodo’
importieren Sie Aufgaben aus ‘./Todos’

Klasse App extends Component {
render() {
return (
<Provider>
<CreateTodo />
<Todos />
</Provider>
);
}
}

export Standard-App;

Zusammenfassung

Es gibt verschiedene Möglichkeiten der Verwaltung von Staat Reagieren, abhängig von der Komplexität Ihrer Anwendung und Unausgesprochene ist eine handliche Bibliothek, die können es einfacher machen. Lohnt es sich, erneut auf den Punkt, dass Redux, während genial finden, ist nicht immer das beste Werkzeug für den job, auch wenn wir oft für die es packen in diesen Arten von Fällen. Hoffentlich haben Sie jetzt das Gefühl, Sie haben ein neues tool in Ihrem Gürtel.