Redux Lagre hjernen på søknaden din

Den beste måten å arkivere Redux-appen på

Denne artikkelen handler om hvordan du tenker i Redux. Vi vil prøve å forstå hvordan vi kan bruke dette fantastiske biblioteket for å gjøre applikasjonen vår mer stabil, robust og vedlikeholdbar. Det er språkagnostisk, men vi vil beholde omfanget vårt til Redux med React.

For de som ikke har brukt Redux før, vil jeg sitere fra dokumentene:

Redux er en forutsigbar tilstandscontainer for JavaScript-apper.

Det er bare et 2kb-bibliotek som løser et av de største problemene med å vedlikeholde store JavaScript-apper: statlig styring.

Denne artikkelen handler ikke om Redux, siden det allerede er mange artikler om den. Snarere handler det om hvordan vi skal visualisere en Redux-app og bruke den effektivt.

La oss si at vi bygger en e-handelsapplikasjon der den har noen grunnleggende sider som katalog, produktdetaljer og betalingssuksess.

Nedenfor er wireframes for hvordan appen ville se ut:

KatalogsideProduktsideBetalingssuksess

Så arkivering i Redux betyr at vi må visualisere applikasjonen som en enhet, og hver side er en underenhet.

Det er fire stadier å bygge en Redux-app:

  1. Visualiser statstreet
  2. Design reduksjonsmaskiner
  3. Gjennomfør handlinger
  4. Gjennomfør presentasjon

Trinn 1: Visualiser statstreet

La oss designe statstreet fra wireframes over.

Søknadsstatreet

Dette er det viktigste trinnet. Etter at vi er ferdige med å visualisere statstreet vårt, blir det veldig enkelt å implementere Redux-teknikker! Stiplete sirkler er stater som vil bli delt av applikasjonen, solide sirkler er sidespesifikke tilstander.

Trinn 2: Design reduksjonsmaskiner

I tilfelle du lurer på hva en redusering er, vil jeg sitere direkte fra dokumentene:

Redusere spesifiserer hvordan applikasjonens tilstand endres som svar på handlinger sendt til butikken. Husk at handlinger bare beskriver hva som skjedde, men ikke beskriver hvordan applikasjonens tilstand endres.

Hver av statene som er viktige, kan ha sine egne reduksjonsmidler. Senere kan vi kombinere dem i ett rotreduksjonsmiddel som til slutt vil definere butikken (den eneste sannhetskilden til applikasjonen). Det er her den virkelige makten kommer inn: du har total kontroll over tilstandene dine og deres oppførsel. Ingenting går uovertruffen av butikken. Den stille observatøren holder vakt.

Butikken holder vakt

La oss se på et eksempel på hvordan du designer en reduksjonsring ved hjelp av applikasjonsstatreet som vi designet ovenfor.

// Root Reducer
const rootReducer = combineReducer ({
  header: headerReducer,
  login: loginReducer,
  bunntekst: footerReducer,
  vanlig: commonReducer,
  produkt: produktReducer,
  katalog: katalogReducer,
  betaling: betalingReducer
});

Rotreduseren sier alt. Den inneholder alt butikken trenger å vite om applikasjonen.

La oss se på hvordan en underenhet headerReducer ser ut.

Husker du hvordan vi designet toppteksttilstanden vår?

Header state tree
// Header Reducer
const headerReducer = combineReducer ({
  menu: menuReducer,
  search: searchReducer,
  beliggenhet: locationReducer
});

Reduseren vår er en kopi av det vi designet tidligere i vårt statstre. Dette er kraften i visualisering.

Legg merke til hvordan et reduseringsapparat inneholder flere reduksjonsmaskiner. Vi trenger ikke å lage en stor redusering. Det kan enkelt deles inn i mindre reduksjonsmaskiner, ettersom hver har sin individuelle identitet og har sine egne spesifikke operasjoner. Dette hjelper oss med å skape separasjon av logikk, noe som er veldig viktig for å vedlikeholde store apper.

La oss nå forstå hvordan en typisk reduksjonsfil skal settes opp, for eksempel searchReducer.

// Søkeduserende
const initialState = {
  nyttelast: [],
  isLoading: falsk,
  feil: {}
}
eksportfunksjon searchReducer (tilstand = initialState, handling) {
  bytte (action.type) {
    sak FETCH_SEARCH_DATA:
      komme tilbake {
        ...stat,
        isLoading: sant
    };
    
    sak FETCH_SEARCH_SUCCESS:
      komme tilbake {
        ...stat,
        nyttelast: action.payload,
        isLoading: falsk
      };
    
    sak FETCH_SEARCH_FAILURE:
      komme tilbake {
        ...stat,
        feil: action.error,
        isLoading: falsk
      };
    sak RESET_SEARCH_DATA:
      returner {... state, ... initialState}
    misligholde:
      retur tilstand;
  }
}

Dette reduseringsmønsteret definerer endringene som er mulig i søkestatusen når søke-API-en blir kalt.

FETCH_SEARCH_DATA, FETCH_SEARCH_SUCCESS, FETCH_SEARCH_FAILURE, RESET_SEARCH_DATA

Alt det ovennevnte er mulige konstanter som definerer hvilke mulige handlinger som kan utføres.

Merk: Det er viktig å opprettholde en RESET_SEARCH_DATA-handling, i tilfelle vi må tilbakestille data under montering av en komponent.

Trinn 3: Gjennomfør handlinger

Hver handling som har API-anrop, går vanligvis gjennom tre stadier i en app.

  1. Lastetilstand -> FETCH_SEARCH_DATA
  2. Suksess -> FETCH_SEARCH_SUCCESS
  3. Feil -> FETCH_SEARCH_FAILURE

Vedlikehold av disse handlingstypene hjelper oss med å sjekke dataflyten når et API blir kalt i appen vår.

La oss dykke ned i koden for å forstå hvordan en typisk handling vil se ut.

eksportfunksjon henteSearchData (args) {
  return async (dispatch) => {
    // Start lastingstatus
    avsendelse ({
      type: FETCH_SEARCH_DATA
    });
    prøv {
      // Ring API
      const result = avvente fetchSearchData (args.pageCount, args.itemsPerPage);
      
     // Oppdater nyttelasten i redusering på suksess
     avsendelse ({
        type: FETCH_SEARCH_SUCCESS,
        nyttelast: resultat,
        currentPage: args.pageCount
      });
    } fangst (feil) {
     // Oppdater feil i reduksjonsenhet ved feil
     avsendelse ({
        type: FETCH_SEARCH_FAILURE,
        feil: feil
      });
    }
  };
}

Legg merke til hvordan dataflyten spores av butikken gjennom handlinger. Dette gjør hver eneste endring i appen ansvarlig.

Dermed blir lignende handlinger skrevet for hver endring i reduksjonsenheter i forskjellige stater.

En av de største fordelene med Redux er abstraksjonen av hver eneste handling.

Dataflyt i en Redux-app

Trinn 4: Gjennomfør presentasjon

import React, {Component} fra 'react';
importer {connect} fra 'react-redux'
importer fetchSearchData fra './action/fetchSearchData';
importer SearchData fra './SearchData';
const Search = (rekvisitter) => (
  
);
const mapStateToProps = (tilstand) => ({
  søk: state.header.search.payload
});
const mapDispatchToProps = {
  fetchSearchData
};
eksporter standardtilkobling (mapStateToProps, mapDispatchToProps) (Søk)

Som du kan se, er presentasjonskomponenten veldig enkel og lett å forstå.

Konklusjon

Jeg vil nevne noen av de største fordelene jeg fant ved bruk av Redux:

  1. Det reduserer absolutt kodelukten.
  2. Abstraksjon av kode er lettere å oppnå.
  3. Redux introduserer oss også for andre prinsipper som uforanderlighet, funksjonell programmering og mange andre.
  4. Det lar deg visualisere hver eneste handling og spore dem med "tidsreise."

Jeg håper denne artikkelen hjelper deg med å få et tydeligere bilde av hvorfor Redux er virkelig fantastisk, og hvordan vi kan bruke kraften i visualisering til å gjøre vedlikeholdbare applikasjoner.

Følg meg på twitter for å få flere oppdateringer angående nye artikler og for å holde deg oppdatert i den siste frontend-utviklingen. Del også denne artikkelen på twitter for å hjelpe andre å vite om den. Deling er omsorgsfull ^ _ ^.

Husk at du kan klaffe opptil 50 ganger for å vise din kjærlighet!

Noen nyttige ressurser

  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

Mine forrige artikler

  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