Redux Bewaar het brein van uw applicatie

De beste manier om uw Redux-app te ontwerpen

Dit artikel gaat over hoe te denken in Redux. We zullen proberen te begrijpen hoe we deze prachtige bibliotheek kunnen gebruiken om onze applicatie stabieler, robuuster en onderhoudbaar te maken. Het is taal agnostisch, maar we zullen ons bereik houden tot Redux met React.

Voor degenen die nog nooit Redux hebben gebruikt, citeer ik uit de documenten:

Redux is een voorspelbare statuscontainer voor JavaScript-apps.

Het is slechts een 2kb-bibliotheek die een van de grootste problemen bij het onderhoud van grote JavaScript-apps oplost: statusbeheer.

Dit artikel gaat niet over Redux, omdat er al veel artikelen over zijn. Het gaat er eerder om hoe we een Redux-app moeten visualiseren en effectief moeten gebruiken.

Laten we zeggen dat we een e-commerce-applicatie bouwen die enkele basispagina's heeft, zoals catalogus, productdetails en betalingssucces.

Hieronder staan ​​de wireframes van hoe de app eruit zou zien:

CataloguspaginaProductpaginaBetaling gelukt

Architecten in Redux betekent dus dat we de toepassing moeten visualiseren als één entiteit en elke pagina een subentiteit is.

Er zijn vier stappen om een ​​Redux-app te bouwen:

  1. Visualiseer de statusboom
  2. Ontwerp je verloopstukken
  3. Acties uitvoeren
  4. Presentatie implementeren

Stap 1: Visualiseer de statusboom

Laten we vanuit de bovenstaande wireframes onze statusboom ontwerpen.

Boom van de applicatiestatus

Dit is de belangrijkste stap. Nadat we klaar zijn met het visualiseren van onze statusboom, wordt het implementeren van Redux-technieken echt eenvoudig! Gestippelde cirkels zijn toestanden die door de toepassing worden gedeeld, effen cirkels zijn paginaspecifieke toestanden.

Stap 2: Ontwerp uw verloopstukken

In het geval u zich afvraagt ​​wat een verloopstuk precies is, citeer ik rechtstreeks uit de documenten:

Reducers geven aan hoe de status van de toepassing verandert als reactie op acties die naar de winkel worden verzonden. Vergeet niet dat acties alleen beschrijven wat er is gebeurd, maar niet hoe de status van de toepassing verandert.

Elk van de staten die belangrijk zijn, kunnen hun eigen verloopstukken hebben. Later kunnen we ze combineren in één rootreductiemiddel dat uiteindelijk de winkel zal definiëren (de enige bron van waarheid van de toepassing). Dit is waar de echte kracht komt: je hebt totale controle over je staten en hun gedrag. Niets gaat ongeëvenaard door de winkel. De stille waarnemer houdt de wacht.

De winkel die waakt

Laten we een voorbeeld bekijken van het ontwerpen van een verloopstuk met behulp van de applicatiestatusboom die we hierboven hebben ontworpen.

// Wortelreductiemiddel
const rootReducer = combinReducer ({
  header: headerReducer,
  login: loginReducer,
  footer: footerReducer,
  vaak: commonReducer,
  product: productReducer,
  catalogus: catalogusReducer,
  betaling: betalingReducer
});

Het wortelreductiemiddel zegt het allemaal. Het bevat alles wat de winkel moet weten over de applicatie.

Laten we nu eens kijken naar hoe een subentiteit headerReducer eruit ziet.

Weet je nog hoe we onze kopstatus hebben ontworpen?

Boom met koptekststatus
// Koptekstreductiemiddel
const headerReducer = combinReducer ({
  menu: menuReducer,
  zoeken: searchReducer,
  locatie: locatieReducer
});

Ons verloopstuk is een replica van wat we eerder in onze statusboom hebben ontworpen. Dit is de kracht van visualisatie.

Merk op hoe een verloopstuk meer verloopstukken bevat. We hoeven geen enorm verloopstuk te maken. Het kan gemakkelijk worden onderverdeeld in kleinere verloopstukken, omdat elk zijn individuele identiteit heeft en zijn eigen specifieke bewerkingen heeft. Dit helpt ons om scheiding van logica te creëren, wat erg belangrijk is voor het onderhouden van grote apps.

Laten we nu eens kijken hoe een typisch verkleinerbestand moet worden ingesteld, bijvoorbeeld searchReducer.

// Zoek verkleiner
const initialState = {
  laadvermogen: [],
  isLoading: false,
  fout: {}
}
exportfunctie searchReducer (staat = initialState, actie) {
  schakelaar (action.type) {
    case FETCH_SEARCH_DATA:
      terug {
        ...staat,
        isLoading: waar
    };
    
    case FETCH_SEARCH_SUCCESS:
      terug {
        ...staat,
        payload: action.payload,
        isLoading: false
      };
    
    case FETCH_SEARCH_FAILURE:
      terug {
        ...staat,
        error: action.error,
        isLoading: false
      };
    case RESET_SEARCH_DATA:
      return {... state, ... initialState}
    standaard:
      terugkeer staat;
  }
}

Dit verlooppatroon definieert de mogelijke wijzigingen in de zoekstatus wanneer de zoek-API wordt aangeroepen.

FETCH_SEARCH_DATA, FETCH_SEARCH_SUCCESS, FETCH_SEARCH_FAILURE, RESET_SEARCH_DATA

Alle bovenstaande zijn mogelijke constanten die bepalen welke mogelijke acties kunnen worden uitgevoerd.

Opmerking: Het is belangrijk om een ​​RESET_SEARCH_DATA-actie te behouden voor het geval we gegevens moeten resetten tijdens het ontkoppelen van een component.

Stap 3: Acties uitvoeren

Elke actie die API-aanroepen heeft, doorloopt meestal drie fasen in een app.

  1. Laadstatus -> FETCH_SEARCH_DATA
  2. Succes -> FETCH_SEARCH_SUCCESS
  3. Mislukking -> FETCH_SEARCH_FAILURE

Door deze actietypen te handhaven, kunnen we de gegevensstroom controleren wanneer een API in onze app wordt aangeroepen.

Laten we de code induiken om te begrijpen hoe een typische actie eruit zal zien.

exportfunctie fetchSearchData (args) {
  retour async (verzending) => {
    // Laadstatus starten
    verzending({
      type: FETCH_SEARCH_DATA
    });
    proberen {
      // Roep de API aan
      const result = wachten fetchSearchData (args.pageCount, args.itemsPerPage);
      
     // Update payload in verloopstuk bij succes
     verzending({
        type: FETCH_SEARCH_SUCCESS,
        laadvermogen: resultaat,
        currentPage: args.pageCount
      });
    } catch (err) {
     // Update-fout in verloopstuk bij mislukking
     verzending({
        type: FETCH_SEARCH_FAILURE,
        fout: fout
      });
    }
  };
}

Merk op hoe de gegevensstroom door acties wordt bijgehouden door acties. Dit houdt elke verandering in de app verantwoordelijk.

Aldus worden vergelijkbare acties geschreven voor elke verandering in reductoren van verschillende toestanden.

Een van de grootste voordelen van Redux is de abstractie van elke actie.

Gegevensstroom in een Redux-app

Stap 4: Presentatie implementeren

import React, {Component} van 'react';
import {connect} van 'react-redux'
fetchSearchData importeren uit './action/fetchSearchData';
import SearchData van './SearchData';
const Zoeken = (rekwisieten) => (
  
);
const mapStateToProps = (staat) => ({
  zoeken: state.header.search.payload
});
const mapDispatchToProps = {
  fetchSearchData
};
standaardverbinding exporteren (mapStateToProps, mapDispatchToProps) (zoeken)

Zoals u ziet, is de presentatiecomponent zeer eenvoudig en gemakkelijk te begrijpen.

Gevolgtrekking

Ik wil graag enkele van de grootste voordelen noemen die ik heb gevonden met Redux:

  1. Het vermindert zeker de geur van de code.
  2. Abstractie van code is gemakkelijker te bereiken.
  3. Redux laat ons ook kennismaken met andere principes zoals onveranderlijkheid, functioneel programmeren en vele andere.
  4. Hiermee kunt u elke actie visualiseren en volgen met 'tijdreizen'.

Ik hoop dat dit artikel je helpt een duidelijker beeld te krijgen van waarom Redux echt geweldig is en hoe we de kracht van visualisatie kunnen gebruiken om onderhoudbare applicaties te maken.

Volg mij op Twitter voor meer updates over nieuwe artikelen en om op de hoogte te blijven van de nieuwste frontend-ontwikkelingen. Deel dit artikel ook op Twitter zodat anderen er meer over weten. Delen is zorgzaam ^ _ ^.

Vergeet niet dat je tot 50 keer kunt klappen om je liefde te tonen!

Enkele nuttige bronnen

  1. https://redux.js.org/
  2. https://github.com/reduxjs/redux/blob/master/examples
  3. https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.c4yhhvk0d

Mijn vorige artikelen

  1. https://medium.freecodecamp.org/how-to-use-redux-persist-when-migrating-your-states-a5dee16b5ead
  2. https://codeburst.io/redux-observable-to-the-rescue-b27f07406cf2
  3. https://codeburst.io/building-webapp-for-the-future-68d69054cbbd
  4. https://codeburst.io/cors-story-of-requesting-twice-85219da7172d