Het beheer Staat in Reageren Met Onuitgesproken

0
26

Als uw aanvraag wordt complexer, het beheer van de staat kan worden vervelend. Een onderdeel van de staat is bedoeld als zelfstandige, waardoor het delen van state over meerdere onderdelen van hoofdpijn. Redux is meestal de go-to-bibliotheek te beheren staat in Reageren, maar afhankelijk van hoe complex uw toepassing is, hoeft u misschien geen Redux.

Onuitgesproken is een alternatief dat biedt u de functionaliteit voor het beheren van state over meerdere onderdelen met een Container klasse en een Provider en een Abonnement onderdelen. Laten we eens kijken Onuitgesproken in actie door het creëren van een eenvoudige teller en dan kijken naar een meer geavanceerde toepassing.

Met behulp van Onuitgesproken Maken van een Teller

De code voor de teller die we maken is beschikbaar op GitHub:

Bekijk Repo

U kunt toevoegen Onuitgesproken om uw verzoek te Garen:

garen toevoegen onuitgesproken
Container

De container breidt Onuitgesproken Container klasse. Het is alleen gebruikt te worden voor state management. Dit is waar de oorspronkelijke staat zal worden geïnitialiseerd en de oproep tot setState() zal gebeuren.

importeren { Container } van ‘stilzwijgende’

klasse CounterContainer breidt Container {
staat = {
aantal: 0
}

increment = () => {
deze.setState({ count: dit.staat.teller + 1 })
}

verlagen = () => {
deze.setState({ count: dit.staat.count – 1 })
}
}

export standaard CounterContainer

Tot nu toe hebben we gedefinieerd op de Container (CounterContainer), het starten van state voor te tellen bij het getal nul en gedefinieerd methoden voor het optellen en aftrekken van de component staat in stappen verlaagd.

U vraagt zich misschien af waarom we niet zijn geïmporteerd Reageer op dit punt. Er is geen noodzaak om het te importeren in de Container omdat we niet renderen JSX.

Evenementen stralers worden gebruikt om te bellen setState() en de oorzaak van de componenten opnieuw moet renderen. De componenten die gebruik maken van deze container zal hebben om te abonneren.

Inschrijven

Abonneren component wordt gebruikt voor het aansluiten van de staat in de componenten die het nodig hebben. Vanaf hier zullen we in staat zijn om te bellen met de verhogen en verlagen van methoden, die zal het bijwerken van de status van de toepassing en de oorzaak van de geplaatste component opnieuw moet renderen met het juiste aantal. Deze methoden worden geactiveerd door een paar knoppen die activiteiten bevatten luisteraars toevoegen of aftrekken van de graaf, respectievelijk.

importeren Reageren van ‘reageren’
importeren { Inschrijven } van ‘stilzwijgende’

importeren CounterContainer uit ‘./containers/teller’

const Teller = () => {
return (
<Abonneren op={[CounterContainer]}>
{counterContainer => (
<div>
<div>
// De huidige telling waarde
Aantal: { counterContainer.staat.count }
</div>
// Deze knop toe te voegen aan de graaf
<button onClick={counterContainer.toename}>Toename</button>
// Deze toets zal aftrekken van de graaf
<button onClick={counterContainer.verlagen}>Decrement</button>
</div>
)}
</Aanmelden>
)
}

export standaard Teller

Abonneren onderdeel is gezien de CounterContainer in de vorm van een matrix om haar te ondersteunen. Dit betekent dat het Abonneren onderdeel kan abonneren op meer dan één container, en alle van de containers worden doorgegeven aan het om het faillissement van het Abonnement component in een array.

De counterContainer is een functie die ontvangt een exemplaar van elke container Abonneren onderdeel onderschrijft.

Met dat, we hebben nu toegang tot de staat en de methoden die beschikbaar is in de container.

Aanbieder

We maken gebruik van de Aanbieder component voor het opslaan van de container gevallen en laat de kinderen om te abonneren.

importeren Reageren, { Component } van ‘reageren’;
importeren { Provider } van ‘stilzwijgende’

importeren Teller ‘./Teller’

klasse App breidt Onderdeel {
render() {
return (
<Provider>
<Teller />
</Providers>
);
}
}

export standaard applicatie;

Met deze, de Teller component kunt gebruik maken van onze counterContainer.

Onuitgesproken kunt u gebruik maken van alle functionaliteit die Reageren is setState() biedt. Bijvoorbeeld, als we het willen verhogen van de vorige toestand door een drie keer met één klik kunnen we pas een functie setState (), zoals deze:

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

Het idee is dat de setState() nog steeds werkt zoals het doet, maar dit keer met de mogelijkheid om te houden van de toestand opgenomen in een Container klasse. Het wordt gemakkelijk verspreid de staat om alleen de onderdelen die het nodig hebben.

Laten we een To-Do-Applicatie!

Dit is een iets meer gevorderde gebruik van Onuitgesproken. Twee onderdelen inschrijven op de container, die het beheer van de staat, en de methoden voor het bijwerken van de staat. Opnieuw, de code is beschikbaar op Github:

Bekijk Repo

De container zal er als volgt uitzien:

importeren { Container } van ‘stilzwijgende’

klasse TodoContainer breidt Container {
staat = {
todos: [
‘Knoeien met onuitgesproken’,
‘Start dansles’
],
todo:”
};

handleDeleteTodo = (todo) => {
deze.setState({
todos: dit.staat.todos.filter(c => c !== todo)
})
}

handleInputChange = (gebeurtenis) => {
const todo = gebeurtenis.doel.waarde
deze.setState({ todo });
};

handleAddTodo = (gebeurtenis) => {
evenement.preventDefault()
deze.setState(({todos}) => ({
todos: todos.concat(deze.staat.todo)
}))
deze.setState({ todo: “});
}

}

export standaard TodoContainer

De container heeft een eerste todos staat die bestaat uit een array met twee elementen. Toevoegen to-do items, hebben we een todo staat ingesteld op een lege tekenreeks.

We gaan naar een CreateTodo onderdeel dat zal abonneren op de container. Elke keer als er een waarde is ingevoerd, wordt de onChange-gebeurtenis zal leiden tot dan brand de handleInputChange() methode hebben wij in de container. Te klikken op de submit-knop zullen leiden tot handleAddTodo(). De handleDeleteTodo() methode ontvangt een to-do en filters uit de te-doen dat overeenkomt met de doorgegeven.

importeren Reageren van ‘reageren’
importeren { Inschrijven } van ‘stilzwijgende’

importeren TodoContainer uit ‘./containers/todoContainer’

const CreateTodo = () => {
return (
<div>
<Abonneren op={[TodoContainer]}>
{todos =>
<div>
<form onSubmit={todos.handleAddTodo}>
<input
type=”text”
waarde={todos.staat.todo}
onChange={todos.handleInputChange}
/>
<toets>Verzenden</button>
</form>
</div>
}
</Aanmelden>
</div>
);
}

export standaard CreateTodo

Wanneer een nieuwe taak wordt toegevoegd, wordt de todos staat gesteld in de container is bijgewerkt. De lijst van taken is getrokken van de container naar de Todos component door u te abonneren op de component aan de container.

importeren Reageren van ‘reageren’;
importeren { Inschrijven } van ‘stilzwijgende’;

importeren TodoContainer uit ‘./containers/todoContainer’

const Todos = () => (
<ul>
<Abonneren op={[TodoContainer]}>
{todos =>
todos.staat.todos.kaart(todo => (
<li key={todo}>
{todo} <button onClick={() => taken.handleDeleteTodo(todo)}>X</button>
</li>
))
}
</Aanmelden>
</ul>
);

export standaard Todos

Dit onderdeel doorlopen van de reeks van taken in de container en geeft ze in een lijst.

Ten slotte moeten we wikkel de onderdelen die zich abonneren op de container van een provider, zoals we dat ook in het geval van de teller. Wij doen dit in onze App.js bestand precies zoals we dat in de teller voorbeeld:

importeren Reageren, { Component } van ‘reageren’;
importeren { Provider } van ‘stilzwijgende’

importeren CreateTodo uit ‘./CreateTodo’
importeren van Todos ‘./Todos’

klasse App breidt Onderdeel {
render() {
return (
<Provider>
<CreateTodo />
<Todos />
</Providers>
);
}
}

export standaard applicatie;

Inpakken

Er zijn verschillende manieren om het beheer van de staat in Reageren, afhankelijk van de complexiteit van uw toepassing en Onuitgesproken is een handige bibliotheek dat kan het gemakkelijker maken. Het is de moeite waard inhakend op het punt dat Redux, terwijl awesome is, is niet altijd de beste tool voor de job, ook al hebben we vaak grijpen voor het in dit soort gevallen. Hopelijk hebben jullie nu voelen als je een nieuwe tool in uw gordel.