Ta bort ett objekt i en kapslad Redux state

ta Bort ett objekt i en kapslad Redux tillstånd

Om du någonsin har arbetat med Skal ramar (i Synnerhet Reagera), du måste ha hört talas om Redux. Chansen är stor att du aldrig har använt det eller grävt djupare för att förstå dess grundläggande begrepp. Innan vi fortsätter, jag måste säga att övergå till Redux var inte det lättaste för mig inte heller eftersom du behöver för att anta ett nytt sätt att tänka och även göra en del grundläggande codebase refactoring om du redan arbetar på en frontend ansökan: Men jag kan säga att det är värt det eftersom Redux ger dig en gåva av enklare underhåll för din ansökan i det långa loppet. Vi inte kommer spendera en hel del tid här att definiera Redux (kolla gärna in den Redux Centrala Begrepp för bästa första intryck av dess användning). Målet för detta blogginlägg är att införa en gemensam användning som vi har med Stater i en ansökan (jag har aldrig använt Redux med en annan ram förutom att Reagera och kanske stater har en annan definition i andra sammanhang; Om jag någonsin använt Redux med en annan ram som jag kommer att publicera ett uppdaterat inlägg om denna användning)

ta Bort ett objekt i en kapslad Redux tillstånd

Alla rätt! Låt oss se en Redux användningsfall för att förstå det bättre. Om du har läst introduktion om Redux, du vet att tanken bakom Redux är inte för fancy eller komplicerat. Redux fungerar som den enda källan till sanningen genom att hantera hela programmets tillstånd i ett enda träd som är tänkt att vara oföränderliga. Oföränderlighet för en Redux stat innebär att staten träd kommer aldrig att ändras. Om vi behöver en ny stat, använder vi begreppet Åtgärder som ansvarar för att returnera en ny stat träd (Utan att direkt ändra tidigare tillstånd träd). Låt oss bryta ner detta koncept med ett exempel.

låt oss föreställa oss att vi har en flygning bokning ansökan med följande Redux staten (förälder staten träd för hela programmet).

const initialState = {
 isInitiallyLoaded: false,
 flyg: [],
 - filter: {
 kategori: [],
 destination: [],
 },
 fel: null,
};

staten träd är enkel och innehåller några objekt som nycklar som flygningar eller filter. I vår ansökan har vi ett filter som filtrerar flyg baserat på attribut som flight klass typ (klass) eller flygningens destination (destination). Till exempel, om användaren är intresserad av att se bara Business Class: flygresor med slutdestination Oslo och inte filtrering, som kommer att resultera i följande tillstånd träd.

const initialState = {
 isInitiallyLoaded: false,
 flyg: [],
 - filter: {
 kategori: ['Business'],
 destination: ["Oslo"],
 },
 fel: null,
};

Om vi vill ha en mer användarvänlig applikation, vi kan vara intresserade av att visa filter som användaren har valt; till höger under filtrering system. (Kolla in Zalandoo för en verklig värld exempel på denna användning).

 

https://www.zalando.no 

På detta sätt har användaren möjlighet att se alla de filter de har valt och kan ta bort filter för att hon inte längre är intresserad av. För att uppnå detta mål, måste vi ha en removeFilter funktion som tar den typ av fält (till exempel destination) och index (till exempel 1: a elementet) i rutan filter och ta bort filter värdet från motsvarande element i den statliga träd.

(Observera att All kod för Redux tillstånd samt Åtgärder funktioner kan lagras i en förälder fil som heter ducks/flights.js. Senare, den överordnade statliga träd samt åtgärder funktioner kan importeras till barn filer som att filters.js. Mer information om detta arkitektur förhållningssätt i framtida inlägg)

// ducks/flights.js (Förälder)
exportera const NAMN = `@flightdata`;
exportera const REMOVE_FILTER = `${NAME}/REMOVE_FILTER`;
const initialState = {
 isInitiallyLoaded: false,
 flyg: [],
 - filter: {
 kategori: ['Business'],
 destination: ["Oslo"],
 },
 fel: null,
};
export-funktion removeFilter({ , index }) {
 return {
 typ: REMOVE_FILTER,
 ,
 index,
 };
}
exportera standard funktion reducer(staten = initialState action = {}) {
 switch (handling:.typ) { 
 ärende REMOVE_FILTER:
 return {
 ...staten,
 - filter: {
 ...staten.filter,
 [handling:.fält]: [...staten.filter[handling:.fält]]
 .filter((x, index) => index !== handling:.index)
 },
 };
 standard:
 tillbaka staten;
 }
}

Som ni kan se, Reducer Funktion ovan är ansvarig för återvända en ny stat träd utan att direkt muterar den tidigare tillstånd träd som ger oss en hel del fördelar som enklare felsökning och enhetstestning (Eftersom alla åtgärder funktioner är rena funktioner med ett förutsägbart beteende, Det är en tilltalande och kraftfull funktion för alla program).

// filters.js (Barnet)
importera { 
 getFilters, 
 removeFilter,
} '../ankor/flyg';
handleRemoveFilter(, index) {
 const { removeFilter } = i detta.rekvisita;
 removeFilter({, index});
}
<Knappen onClick=
 {detta.handleRemoveFilter.bind(null, 'destination', index)}
> 
'Oslo'
</Knappen>

ovanstående kod kan vara en typisk användning av removeFilter funktionalitet vi har implementerat i den flights.js, Efter att du har använt funktioner karta till karta tillhörande filter värden som destination (getFilters kan definieras som den funktion som kommer att ge oss de värden för filter som har valts. Utförlig förklaring för att uppnå detta har inte gjorts i detta blogg inlägg, men kanske kan bli ett ämne för en egen i framtiden). Indexet är resultatet av en kartläggning av de filter värden som kommer att ge oss den exakta placeringen av varje filter värde i staten träd.