Hjälp Komponera om att Dela Funktioner Mellan Reagera Komponenter

0
9

Dela funktioner mellan Reagera komponenter är ett ganska vanligt behöver. Konceptet är att vi kan skapa beteendet på ett ställe och sedan förlänga det i olika komponenter. Högre ordningens Komponenter är ett sätt att göra detta. Men det är ett annat sätt att använda ett bibliotek som heter Komponera.

GitHub Repo

Vad är att Komponera?

Den dokumentation som hjälper oss att svara på den:

Komponera är en Reagera verktyget bälte för komponenter funktion och högre-för komponenter. Tänk på det som lodash för att Reagera.

I grund och botten, det är ett bibliotek för att Reagera som innehåller ett gäng medhjälpare för att returnera olika högre för komponenter — vilket är trevligt eftersom det tar några av de tråkiga jobbet ut för att definiera gemensamma Reagera mönster och göra dem omedelbart tillgängliga för att utöka till andra komponenter.

Vad exakt kan man göra? Tja, låt oss gå igenom några exempel tillsammans.

Lägg till staten funktionella statslösa komponenter

Om du inte kunde gissa det av namnet, en funktionell statslösa komponenten inte har några stater. Det är bara accepterar rekvisita och returnerar UI till front end.

const Hälsning = rekvisita =>
<p>
Hej, {rekvisita.name}!
</p>

I situationer där du vill använda dig av staten i din funktionella statslösa komponent, du måste konvertera den till en klass komponent. Det är där Komponera kommer väl till pass.

Komponera ger dig withState() hjälpare för att lägga till staten för att din funktionella statslösa komponenter. Det förvaltar ett enda värde. Du kan inte hantera mer än en stats värde i withState() som du ska göra i din klass komponent. Du passerar en funktion för att uppdatera läget värde och en valfri standard angivet värde.

Här är hur withState() är strukturerat:

withState(
stateName: string, // namnet som vi kallar vår stat
stateUpdaterName: string, // namnet på funktionen för att ringa
initialState: någon | (rekvisita: Object) => alla // tillval standard staten att passera
): HigherOrderComponent

En disk är ett vanligt exempel som används för att visa ett koncept. Här är hur vi kan skapa en super-enkel räknare som använder Komponera s withState() hjälpare:

const App = withState(“räkna”, “handleCounter”, 0)(({ count, handleCounter }) => {
avkastning (
<div>
<p>{count}</p>
<button onClick={() => handleCounter(n => n + 1)}>Öka</button>
<button onClick={() => handleCounter(n => n – 1)}>Minska</button>
</div>
);
});

Eftersom withState() helper är redan tillgänglig för oss, vi kan kalla det direkt och förse den med de parametrar som den behöver. Igen, dessa är:

  • stateName: namn vi kallar vår stat
  • stateUpdaterName: namnet på funktionen för att ringa
  • initialState: Valfri standard staten att passera

Dessa parametrar är integrerat i UI markup vi vill göra på den fronten.

Det finns ett annat sätt vi kunde ha gjort vårt counter-komponent och det är värt att titta på för att få mer övning i att sätta ett Komponera hjälpare att använda.

Först skapar vi en högre ordningens del med withState() och de parametrar som krävs.

const förbättrad = withState(“counter”, “handleCounter”, 0);

Nästa gör vi Motverka komponent, som arbetar i withState() parametrar:

const Counter = ({ counter, handleCounter }) => (
<div>
<h1>{counter}</h1>
<button onClick={() => handleCounter(n => n + 1)}>Öka</button>
<button onClick={() => handleCounter(n => n – 1)}>Minska</button>
</div>
);

Observera att namnet på staten och updater-funktionen är godkänd som rekvisita för att Motverka komponent.

Slutligen, vi skapar vår App komponent genom att linda Counter komponent i de högre-för ökad komponent.

const App = enhanced(Counter);

Se Pennan Komponera withState av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Här är en annan populär metod:

const förbättrad = withState(“räkna”, “handleCounter”, 0);
const App = enhanced(({ count, handleCounter }) => {
avkastning (
<div>
<p>{count}</p>
<button onClick={() => handleCounter(n => n + 1)}>Öka</button>
<button onClick={() => handleCounter(n => n – 1)}>Minska</button>
</div>
);
});

Se Pennan Komponera withState v2 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Hantera tillstånd att använda withHandlers()

Komponera om bilden har också en withHandlers() helper som gör att du hanterar staten genom att definiera funktioner som ska användas för att uppdatera en komponents tillstånd. Och, du kan använda den tillsammans med withState()!

Dessa är i princip högre ordningens funktioner att ta i rekvisita och tillbaka en funktion som handler. Låt oss bryta ned strukturen som vi gjorde i föregående exempel.

withHandlers({
incrementCounter: rekvisita => event => {
händelsen.preventDefault();
rekvisita.handleCounter(rekvisita.count + 1);
}
})

Först och främst, vi har identifierat incrementCounter, som kommer att vara tillgängliga för våra Counter-komponent för att uppdatera räkna värdet på klicka.

Nästa, vi bygger counter som vi gjorde innan — som en högre ordningens del med withState():

const enhancedState = withState(“räkna”, “handleCounter”, 0);

Nu definierar vi våra funktioner att sätta withHandlers() du använder:

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

Vi har konstruerat en högre ordningens komponent vi ringer enhancedHandler och används withState() för att ange två-funktionen hanterar i det: incrementCounter och decrementCounter. Dessa hanterare innehåller parametrar som kommer att tas emot som rekvisita av de komponenter som kallar dem. De kommer att behövas om vi vill uppdatera läget för den komponent som definieras med hjälp av withState().

Okej, på att skapa vårt counter-komponenten:

const Counter = ({ count, incrementCounter, decrementCounter }) => (
<div>
<h1>{count}</h1>
<button onClick={incrementCounter}>Öka</button>
<button onClick={decrementCounter}>Minska</button>
</div>
);

Se det? Staten och handlers är beräknade att skickas som rekvisita för att motverka komponent.

Att använda sig av de högre för komponenter som vi definierat, vi måste passera Counter komponent för att enhancedHandler och linda in det som en parameter till enhancedState.

Med andra ord:

const App = enhancedState(enhancedHandler(Counter));

Se Pennan Komponera withState & withHandlers av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Komponera flera högre för komponenter

I det sista exemplet kommer vi använda oss av två högre för komponenter. Är det inte bättre av att kedja ihop dem? Absolut! Komponera om bilden ger oss en skriv() helper att göra just det. Vi kan använda för att komponera() för att skapa en komponent som komponerar både högre för komponenter i ett svep.

const förbättrad = komponera(
withState(“räkna”, “handleCounter”, 0),
withHandlers({
incrementCounter: rekvisita => event => {
händelsen.preventDefault();
rekvisita.handleCounter(rekvisita.count + 1);
},
decrementCounter: rekvisita => event => {
händelsen.preventDefault();
rekvisita.handleCounter(rekvisita.count – 1);
}
})
);

Nu kan vi använda de förbättrade komponent i vår App komponent:

const App = enhanced(({ count, incrementCounter, decrementCounter }) => {
avkastning (
<div>
<p>{count}</p>
<button onClick={incrementCounter}>Öka</button>
<button onClick={decrementCounter}>Minska</button>
</div>
);
});

Se Pennan Komponera – komponera withState & withHandlers av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Hantera tillstånd att använda Redux som reducer

En annan trevlig sak Komponera gör är att du kan hantera tillstånd att använda en reducering funktion (withReducer). En reducering uppdateringar staten som en komponent i ett svar till en viss åtgärd.

Strukturen av withReducer() ser ut så här:

withReducer<S, A>
stateName: string,
dispatchName: string,
reducer: (stat: S åtgärder: A) => S,
initialState: S | (ownerProps: Object) => S
): HigherOrderComponent</S>

Den första parametern är namnet på staten. Den andra är den avsändande metod. försändelsen kommer att användas i avsändning åtgärder som vi har i Redux. Nästa, vi har reducer och det ursprungliga tillståndet.

I samband med våra counter-komponent, withReducer() kommer att uppdatera den stat som räknas: greven kommer att gå upp med en åtgärd vi kommer att ringa ökning och, omvänt, räkningen kommer att gå ner med en åtgärd som vi kallar minska.

Först skapar vi en förbättrad komponent genom att komponera withReducer och withHandlers.

const förbättrad = komponera(
withReducer(
“räkna”,
“leverans”,
(staten, action) => {
switch (åtgärd.typ) {
fallet “ÖKA”:
avkastning staten + 1;
målet “MINSKA”:
tillbaka state – 1;
standard:
avkastning staten.
}
},
0
),
withHandlers({
incrementCounter: ({ försändelsen }) => e => dispatch({ type: “INCREMENT” }),
decrementCounter: ({ försändelsen }) => e => dispatch({ type: “DECREMENT” })
})
);

incrementCounter och decrementCounter kommer att svara på DOM-händelser och sända en typ av åtgärd. Staten kommer att uppdateras beroende på typ av åtgärd. Nästa, vi behöver använda oss av detta i vår komponent.

const App = enhanced(({ count, incrementCounter, decrementCounter }) => {
avkastning (
<div>
<p>{count}</p>
<button onClick={incrementCounter}>Öka</button>
<button onClick={decrementCounter}>Minska</button>
</div>
);
});

Se Pennan Komponera – reducering av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Ganska snyggt, eller hur?

Förhoppningsvis ger dig en god uppfattning om vad Komponera är och hur biblioteket rikedom av hjälpare kan effektivisera Reagera utveckling, särskilt när det gäller att hantera och ringer staterna.

Naturligtvis finns det mycket mer att Komponera än vad vi har här. En snabb genomsökning av API-dokumentationen kommer att visa att det finns många högre för komponenter som du kan sätta att använda, beroende på din ansökan: s krav. Gå ut, bygga, och tveka inte att droppa en kommentar om du har några frågor!