Mit neu-zusammensetzen, um die Share-Funktion Zwischen Komponenten Reagieren

0
28

Sharing-Funktionalitäten zwischen Komponenten Reagieren ist eine ziemlich häufige müssen. Das Konzept ist, dass wir nachweisen können das Verhalten in einem Ort und dann erweitern Sie es, zwischen den verschiedenen Komponenten. Höherwertige Komponenten sind ein Weg, dies zu tun. Doch, es gibt einen anderen Weg über eine Bibliothek namens Recompose.

GitHub Repo

Was ist neu-zusammensetzen?

Die Dokumentation hilft uns, die Antwort:

Recompose ist ein Reagieren utility-Gurt für die Funktion der Komponenten und höherer Ordnung-Komponenten. Denken Sie daran, wie lodash für Reagieren.

Im Grunde ist es eine Bibliothek für Reagieren, enthält eine Reihe von Helfern, die verschiedene höhere-Bestellung von Komponenten — das ist schön, denn es dauert einige die Routinearbeit aus der Definition gemeinsamer Reagieren Muster und macht Sie sofort verfügbar sind, zu erweitern, zu anderen Komponenten.

Was genau kann es? Gut, betrachten wir ein paar Beispiele zusammen.

Hinzufügen Zustand der funktionalen zustandslose Komponenten

Wenn Sie konnte nicht erraten, es durch den Namen, eine zustandslose funktionale Komponente, die keine Staaten. Es bloß akzeptiert Requisiten und zurück UI mit dem vorderen Ende.

const Gruß = props =>
<p>
Hallo, {props.name}!
</p>

In Szenarien, In denen Sie Gebrauch davon machen wollen, geben Sie in Ihrer zustandslose funktionale Komponente, die Sie haben, um Sie zu konvertieren, um eine Klasse Komponente. Dies ist, wo Bauen Sie kommt in handliches.

Neu-zusammensetzen-bietet Ihnen die withState() helper hinzufügen Staates funktionale zustandslose Komponenten. Gelingt es einem Staat Wert. Sie können verwalten mehr als eine state-Wert im withState (), wie Sie in Ihrer Klasse Komponente. Sie übergeben eine Funktion zum update der state-Wert und einen optionalen Standardwert angegebenen Wert.

Hier ist, wie withState() aufgebaut ist:

withState(
stateName: string, // der name, den wir nennen unseren Staat
stateUpdaterName: string, // der name der aufzurufenden Funktion
initialState: alle | (Requisiten: – Objekt) = > / / optional default Zustand zu übergeben
): HigherOrderComponent

Ein Zähler ist ein gängiges Beispiel verwendet, um ein Konzept zu zeigen. Hier ist, wie können wir eine super einfache Zähler mit Recompose ist withState() Helfer:

const App = withState(“count”, “handleCounter”, 0)(({ count, handleCounter }) => {
return (
<div>
<p>{count}</p>
<button onClick={() => handleCounter(n => n + 1)}>Increment</button>
<button onClick={() => handleCounter(n => n – 1)}>Decrement</button>
</div>
);
});

Da die withState () – Helfer ist bereits bei uns verfügbar, wir rufen Sie sofort und bieten es mit den Parametern, die es braucht. Wieder, diese sind:

  • stateName: Der name, den wir nennen unseren Staat
  • stateUpdaterName: Der name der aufzurufenden Funktion
  • initialState: Optional default-Zustand übergeben

Diese Parameter sind dann integriert in den UI-markup-wir Rendern möchten, auf der Vorderseite Ende.

Gibt es eine andere Möglichkeit hätten wir unsere Konter Komponente und es lohnt sich zu betrachten, um mehr Praxis setzen eines Recompose-Helfer zu verwenden.

Zuerst erstellen wir ein higher-order-Komponente mit withState() und die erforderlichen Parameter ein.

const enhanced = withState(“counter”, “handleCounter”, 0);

Als Nächstes machen wir die Zähler-Komponente, die in den withState() Parameter:

const Counter = ({ Zähler, handleCounter }) => (
<div>
<h1>{counter}</h1>
<button onClick={() => handleCounter(n => n + 1)}>Increment</button>
<button onClick={() => handleCounter(n => n – 1)}>Decrement</button>
</div>
);

Beachten Sie, dass der name des Staates und die updater-Funktion übergeben wird, die als Requisiten, um die Zähler-Komponente.

Schließlich erstellen wir unsere App-Komponente, die durch das einwickeln der Zähler-Komponente in die höher -, um verbesserte Komponente.

const App = erweitert(Zähler);

Finden Sie den Stift wieder zusammensetzen withState von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Hier ist ein weiterer beliebter Ansatz:

const enhanced = withState(“count”, “handleCounter”, 0);
const App = enhanced(({ count, handleCounter }) => {
return (
<div>
<p>{count}</p>
<button onClick={() => handleCounter(n => n + 1)}>Increment</button>
<button onClick={() => handleCounter(n => n – 1)}>Decrement</button>
</div>
);
});

Finden Sie den Stift wieder zusammensetzen withState v2 von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Griff Zustand mit withHandlers()

Recompose hat auch eine withHandlers() Helfer, der Ihnen erlaubt, Staat Griff durch die Definition von Funktionen, die verwendet wird zum aktualisieren einer Komponente Zustand. Und Sie können es direkt neben withState()!

Diese sind im Allgemeinen höher -, um-Funktionen, die in Requisiten und eine handler-Funktion. Lassen Sie uns brechen die Struktur, wie wir es in dem vorhergehenden Beispiel.

withHandlers({
incrementCounter: Requisiten => event => {
event.preventDefault();
Requisiten.handleCounter(Requisiten.count + 1);
}
})

First off, die wir identifiziert haben incrementCounter, die zur Verfügung stehen werden unsere Zähler-Komponente zur Aktualisierung der count-Wert auf klicken Sie auf.

Als Nächstes konstruieren wir die Zähler, wie wir es vor — als höher -, um-Komponente mit withState():

const enhancedState = withState(“count”, “handleCounter”, 0);

Nun definieren wir unsere Funktion setzen withHandlers() verwenden:

const enhancedHandler = withHandlers({
incrementCounter: Requisiten => event => {
event.preventDefault();
Requisiten.handleCounter(Requisiten.count + 1);
},
decrementCounter: Requisiten => event => {
event.preventDefault();
Requisiten.handleCounter(Requisiten.count – 1);
}
});

Wir haben gebaut eine übergeordnete Komponente, wir nennen enhancedHandler und verwendet, withState() definieren Sie zwei Funktions-Handler in es: incrementCounter und decrementCounter. Diese Prozeduren enthalten Parameter, die erhalten werden, die als Requisiten von den Komponenten, die Sie nennen. Sie werden gebraucht, wenn wir wollen, zu aktualisieren, der den Status der Komponente definiert mit withState().

Okay, auf zu erstellen, in dem der Zähler-Komponente:

const Counter = ({ count, incrementCounter, decrementCounter }) => (
<div>
<h1>{count}</h1>
<button onClick={incrementCounter}>Increment</button>
<button onClick={decrementCounter}>Decrement</button>
</div>
);

Finden Sie, dass? Der Staat und die Handler sind voraussichtlich übergeben werden als Requisiten, um die Zähler-Komponente.

Nutzen Sie die höherwertigen Komponenten, die wir definiert haben, müssen wir passieren die Zähler-Komponente enhancedHandler und wickeln, die als parameter an enhancedState.

In anderen Worten:

const App = enhancedState(enhancedHandler(Counter));

Finden Sie den Stift wieder zusammensetzen withState & withHandlers von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Komponieren Vielfaches höher-Bestellung von Komponenten

Im letzten Beispiel haben wir Gebrauch gemacht von zwei übergeordneten Komponenten. Gibt es eine bessere verketten Sie zusammen? Die meisten auf jeden Fall! Neu-zusammensetzen-bietet uns eine compose () – Helfer, genau das zu tun. Wir können compose() um eine Komponente zu erstellen, komponiert sowohl höher -, um-Komponenten in einem fiel swoop.

const enhanced = compose(
withState(“count”, “handleCounter”, 0),
withHandlers({
incrementCounter: Requisiten => event => {
event.preventDefault();
Requisiten.handleCounter(Requisiten.count + 1);
},
decrementCounter: Requisiten => event => {
event.preventDefault();
Requisiten.handleCounter(Requisiten.count – 1);
}
})
);

Jetzt können wir die Nutzung der erweiterten Komponente in unsere App-Komponente:

const App = enhanced(({ count, incrementCounter, decrementCounter }) => {
return (
<div>
<p>{count}</p>
<button onClick={incrementCounter}>Increment</button>
<button onClick={decrementCounter}>Decrement</button>
</div>
);
});

Finden Sie den Stift Bauen – Komponieren, withState & withHandlers von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Verwalten des Zustands mit Redux wie reducer

Eine andere nette Sache Recompose erlaubt Ihnen die Verwaltung des Zustands mit einem reducer-Funktion (withReducer). Ein reducer updates den Zustand einer Komponente in Reaktion auf eine bestimmte Aktion.

Die Struktur der withReducer() sieht wie folgt aus:

withReducer<S, A>(
stateName: string,
dispatchName: string,
reducer: (state: S, Aktion: A) => S,
initialState: S | (ownerProps: Objekt) => S
): HigherOrderComponent</S>

Der erste parameter ist der name des Staates. Die zweite ist die dispatch-Methode. Versand wird eingesetzt in Versand-Aktionen, wie wir Sie haben in Redux. Nächste, wir haben die Druckminderer und der ursprüngliche Zustand.

Im Rahmen unserer Zähler-Komponente, withReducer() aktualisiert den Status der Zählung: die Zählung wird nach oben mit einer Aktion rufen wir Ihnen Inkrement-und, Umgekehrt, die Anzahl gehen mit einer Aktion, wir rufen Sie zurück.

Zuerst erstellen wir eine erweiterte Komponente Komponieren withReducer und withHandlers.

const enhanced = compose(
withReducer(
“count”,
“Versand”,
(Zustand, Aktion) => {
switch (Aktion.Typ) {
Fall “INCREMENT”:
Rückkehr Zustand + 1;
Fall “DEKREMENT”:
return state – 1;
Standard:
return Zustand;
}
},
0
),
withHandlers({
incrementCounter: ({ Versand }) => e => dispatch({ type: “SCHRITTWEITE” }),
decrementCounter: ({ Versand }) => e => dispatch({ type: “DEKREMENT” })
})
);

incrementCounter und decrementCounter reagieren zu DOM-Ereignisse und Versand eine Aktion geben. Der Staat wird aktualisiert werden, je nach Aktionstyp. Als Nächstes benötigen wir verwenden diese in unsere Komponente.

const App = enhanced(({ count, incrementCounter, decrementCounter }) => {
return (
<div>
<p>{count}</p>
<button onClick={incrementCounter}>Increment</button>
<button onClick={decrementCounter}>Decrement</button>
</div>
);
});

Finden Sie die Stift-neu-zusammensetzen – reducer von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Recht ordentlich, richtig?

Ich hoffe, dies gibt Euch eine gute Vorstellung von dem, was Bauen ist, und wie die Bibliothek die fülle von Helfern zu rationalisieren Entwicklung Reagieren, insbesondere wenn es um die Verwaltung und den Aufruf Staaten.

Natürlich, es gibt eine Menge mehr zu Können als das, was wir habe bedeckt hier. Ein kurzer scan der API-Dokumentation wird zeigen, dass es viele höher -, um-Komponenten, die Sie einsetzen kann, je nach Anwendungsanforderung. Gehen Sie weiter, bauen Sie, und zögern Sie nicht, schreiben Sie einen Kommentar wenn Sie Fragen haben!