Jak vytvořit svůj vlastní React-Router s novým React Context Api

Foto Chris Barbalis na Unsplash

React Context není pro vývojáře reag.js něco nového, ale bylo to něco, co vždy používali ti nejodvážnější (React-Redux, React-Router,…), a to i v samotné dokumentaci. To se však změnilo s vydáním nové verze React 16.3, která přichází s oficiální verzí nového API pro práci s kontextem.

Nejprve bych se chtěl omluvit za tento nenáročný článek, byl napsán na základě mých posledních experimentů s novou verzí Reactu a kód, který jste zde našli, byl z něj extrahován. React-Router je mnohem víc, než to, co představuji, ale tento příklad vysvětlí, jak můžete pomocí nového kontextového rozhraní API vyvinout něco podobného.

Kontext

Kontexty jsou způsob, jak přenést stav shora dolů (rodič k vnoučatům), aniž by bylo nutné tento stav šířit na prostřední komponenty (děti).

Nové rozhraní API React Context

Nové rozhraní React Context API má tři hlavní části:

Od dailyjs:

  • “React.createContext, kterému je předána počáteční hodnota (a volitelně také funkce vyřazování, která používá bitmask). Vrací objekt s poskytovatelem a spotřebitelem “
  • "Komponenta Poskytovatele je ve stromu používána výše a přijímá prop nazývanou hodnotu (což může být cokoli)."
  • „Složka Consumer se používá kdekoli pod poskytovatelem ve stromu a přijímá rekvizitu zvanou„ Children “, což musí být funkce, která akceptuje hodnotu a musí vracet reakční prvek (JSX).“

Vytvořte si svůj vlastní React-Router

Kód v tomto příkladu má o něco více než 40 řádků.

Co chceme?

Budeme chtít, aby naše aplikace zobrazovala komponenty, když daná trasa odpovídá adrese URL.

Něco takového:

  
  
  

A samozřejmě chceme být schopni přejít na určitou adresu URL:

 Users 

Závislosti

Nebudu znovuobjevovat kolo, použijeme většinu stejných závislostí jako samotný React-Router.

Abychom se vypořádali s pushstate, použijeme místo historie historii prohlížeče.

příze přidat prohlížeč-historie

K adresování tras použijeme pathToRegexp

příze přidat cestu k regexp

Vytvořte kontextový kontejner směrovače

Nejdříve musíme vytvořit soubor Context Container, kde budeme spravovat stav routeru a vytvářet akce pro navigaci mezi URL.

Do souboru Router.js přidáme následující:

import React, {createContext} z 'reagovat';
importovat historii z 'historie prohlížeče';
const initialState = {
    url: window.location.pathname
};
const Context = createContext ()
const {Provider, Consumer} = Kontext;

Prvních 9 řádků importuje potřebné libs, inicializuje stav, vytvoří kontextový objekt a extrahuje poskytovatele a spotřebitele z kontextu.

Použijeme Poskytovatele k udržení kontextu a exportu Spotřebitele, který má aplikace použít, aby měl přístup ke stavu a akcím.

třída Router rozšiřuje React.Component {
    state = initialState;
    action = {
        go: (url) => this.setState (
                state => ({... state, url}),
                () => historie (url)
            )
    };
    componentDidMount () {
        history ((e, url) => this.setState (state => ({... state, url})));
    }
    poskytnout() {
        return  {this.props.children} ;
    }
}
export {Router jako výchozí, Consumer,};

Použití poskytovatele kontextu směrovače

Ve své aplikaci byste mohli mít něco podobného a použít směrovač takto:

importovat router z './Router';
// ... import reagovat, jste panel nástrojů a komponenty vašeho obsahu
třída aplikace rozšiřuje React.Component {
  poskytnout() {
    vrátit se (
      
        
        
      
    );
  }
}
exportovat výchozí aplikaci;
Nyní můžete používat komponenty Route a Link, ale nejdřív si je nejprve implementujte.

Složka trasy

Vytvořte soubor Route.js a přidejte jej.

import Reagovat z 'reagovat';
import pathToRegexp z 'path-to-regexp';
importovat {Consumer} z './Router';
export výchozí funkce Trasa (rekvizity) {
    return (
        {({state}) => {
            const re = pathToRegexp (props.path);
            pokud (re.test (state.url)) vrátí dětem;
        }}
    );
}

Používání komponenty trasy

Například ve složce obsahu byste mohli mít tento kód:

// ...
importovat {Consumer} z './Router';
importovat trasu z './Route';
export výchozí funkce Obsah (rekvizity) {
    návrat 
        
            {({state, action}) => {
                return 
                     
main
                                                          
            }}              ; }

Jak vidíte při implementaci komponenty Trasa „cesta“, bude testováno, zda se shoduje s aktuálním stavem poskytovatele kontextu směrovače.

Link Component

Chcete-li procházet mezi adresami URL, můžete přímo použít exponované akce Router Consumer:

importovat {Consumer} z './Router';
// ...

    {({action}) => 
         action.go ('/ users')}> Users 
         action.go ('/ products')}> Products 
    }

Nebo můžete implementovat vlastní komponentu odkazu takto:

import Reagovat z 'reagovat';
importovat {Consumer} z './Router';
export výchozí funkce Link ({path, ... props}) {
    return (
        {({action}) =>  action.go (path)} />}
    );
}

Takové implementace využívající kontext nejsou nic nového, existují v mnoha slavných libsech, nicméně doufám, že vám pomohlo trochu porozumět tomu, jak můžete používat New React Context API a jak snadné je používat ve svém vlastním projekty.

Kód najdete na GitHubu:

Děkujeme Joaquim Ley (Joaquim Ley) za vaši recenzi a váš čas.