Nader Dabit
Nader Dabit

sledovat

1. května 2017 * 5 min čtení

ReSub je knihovna vydaná společností Microsoft + Open Source pro psaní komponent React, která automaticky spravuje předplatné zdrojů dat pouhým přístupem k nim.

navrhuje použití strojopisu. Z jejich dokumentů:

je v pořádku používat ReSub bez TypeScript, ale bez přístupu k metodě strojopisu dekoratéři, obchody a komponenty nemohou využít autosubscript, a jako takový, ztratit hodně z jejich hodnoty.

ReSub by spadal do stejných kategorií jako Redux nebo MobX.

podle mého názoru je nejbližší věc, kterou bych přirovnal k MobX. Knihovna ReSub automaticky spravuje předplatné datových zdrojů pouhým přístupem k nim a bylo s ním opravdu příjemné pracovat v mém experimentování, což snižuje boilerplate a nabízí snadno srozumitelné API.

v tomto příspěvku projdu, jak nastavit nový projekt React Native a implementovat ReSub jako způsob řízení státu. Učiníme tak vytvořením velmi základní aplikace todo.

konečný kód pro tento příklad je umístěn zde a je ve větvi resub-medium-example.

nejprve vytvoříme nový projekt React Native, nastavíme TypeScript, přidáme a nakonfigurujeme tsconfig.json a nainstalujeme potřebné nativní typy React a React, stejně jako závislost ReSub.

  1. vytvořte projekt a poté jej změňte do adresáře
react-native init rnresub// then cd into directory after project is createdcd rnresub

2. Nainstalujte TypeScript (v tomto tutoriálu používáme verzi 2.3.2)

npm i typescript --save-dev

3. Typy instalace

npm i @types/react-native @types/react --save-dev

4. Instalace ReSub

npm i resub --save

5. Vytvořit tsconfig.json

touch tsconfig.json

do tsconfig.json přidejte následující config:

{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"jsx": "react",
"outDir": "build",
"rootDir": "src",
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"experimentalDecorators": true,
"preserveConstEnums": true,
"allowJs": true,
"sourceMap": true
},
"exclude":
}

ve výše uvedené konfiguraci nastavujeme několik věcí, jako je náš kořenový adresář (rootDir, v naší aplikaci src) a sestavení výstupního adresáře (outDir , v našem sestavení aplikace).

výstupní adresář (build) pro nás bude vytvořen při kompilaci typescript.

to znamená, že nyní musíme pokračovat a vytvořit adresář src, kde budeme psát celý náš strojopis.

Dále přidejte do balíčku skript pro sestavení.json ve skriptech:

"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"build": "tsc -w"
},

pomocí tohoto skriptu můžeme volat npm run build z našeho příkazového řádku a spustí kompilátor typescript. Příznak -w řekne kompilátoru, aby sledoval soubory pro jakékoli změny, a když dojde ke změnám, automaticky překompiluje kód.

v kořenovém adresáři projektu vytvořte adresář src se dvěma soubory: vstupním bodem (App.tsx) a úložištěm (TodoStore.tsx). Obchod bude naším datovým úložištěm.

mkdir src
touch src/App.tsx src/TodosStore.tsx

Nyní, když jsou nastaveny naše soubory a závislosti, aktualizujme index.testování.js nebo index.Android.JS soubor použít kód, který bude sestaven pomocí TypeScript.

v rejstříku.testování.js nebo index.Android.JS, aktualizujte soubor na následující:

import React, { Component } from 'react'import {
AppRegistry
} from 'react-native'import App from './build/App'AppRegistry.registerComponent('rnresub', () => App)

Nyní můžeme jít o vytvoření našeho obchodu.

V TodosStore.tsx, vytvořte následující třídu, kterou projdeme krok za krokem:

  1. v horní části souboru importujeme StoreBase, což je základní třída, kterou nám ReSub dává, a co rozšíříme, abychom vytvořili náš obchod, stejně jako dva dekoratéry, kteří budou data synchronizovat (autoSubscribeWithKey a autoSubscribeStore).
  2. v horní části třídy vytvoříme dvě proměnné: pole _todos a řetězec _textInputValue.
  3. metoda updateTextInputValue převezme hodnotu z textového vstupu a poté aktualizuje _textInputValue s hodnotou předanou do metody.
    poté, co to uděláme, zavoláme this.trigger(TriggerKeys.InputTextKey), který spustí všechna předplatné, která jsou přihlášena pomocí dekoratéra autoSubscribeWithKey(TriggerKeys.InputTextKey), a aktualizuje součásti, které tato data používají, aktualizovanými daty úložiště.
    trigger() je k dispozici jako metoda StoreBase, kterou jsme rozšířili o vytvoření našeho obchodu.
  4. addTodo nejprve zkontroluje, zda je přidána hodnota, a pokud ne, vrátí se, aniž by něco udělal.
    v opačném případě vezmeme existující _textInputValue i existující pole todos a poté vytvoříme nové pole, které předá nové todo jako poslední položku v poli.
    jakmile je nové pole vytvořeno, aktualizujeme _textInputValue jako prázdný řetězec a znovu zavoláme this.trigger()
  5. getTodos vrátí seznam _todos. Přidáme dekorátor autoSubscribeWithKey(TriggerKeys.TodosChangedKey), abychom se ujistili, že kdykoli se data změní, bude každá součást používající tato data aktualizována.
  6. getTextInputValue dělá to samé, co getTodos, ale pro hodnotu _textInputValue

Nyní, když je obchod dokončen, vytvoříme poslední soubor, který budeme používat, App.tsx.

tam je docela dost děje tady, a já budu chodit přes to další, ale je to opravdu docela základní implementace, s několika věcmi, které jsou specifické pro ReSub, nejvíce pozoruhodně myslím, že je, že jsme rozšíření ComponentBase třída ReSub vs Component třída React.

  1. importujeme závislosti, které budeme potřebovat pro soubor
  2. vytvoříme rozhraní State a v něm deklarujeme pole todos a řetězec todo
  3. rozšiřujeme třídu ComponentBase Resub, což nám dává nejen metody životního cyklu, na které jsme zvyklí v React, ale také několik dalších užitečných metod, zejména _buildState, což je to, co použijeme k propojení našeho komponentního stavu se stavem úložiště. Podívejte se na propojené dokumenty buildState, kde se dozvíte více o _buildState, ale v podstatě je to metoda, která se volá k obnovení stavu modulu při aktualizaci úložiště.
  4. zbytek této komponenty je několik základních metod aktualizace pole úložiště todos, úložiště _textInputValue a přidání některých stylů.

nyní v terminálu spusťte typescript:

npm run build

dále spusťte aplikaci React Native ve vašem emulátoru a měli bychom vidět fungující aplikaci todo!

opět se zde nachází kód pro tento příklad.

Jmenuji se Nader Dabit . Jsem zastáncem vývojářů v AWS Mobile a pracuji s projekty jako AppSync a Amplify, a zakladatel React Native Training.

pokud máte rádi React a React Native, podívejte se na náš podcast — React Native Radio on Devchat.tv.

také, podívejte se na mou knihu, Reagovat Nativní v akci nyní k dispozici od Manning publikací

pokud se vám líbil tento článek, doporučujeme a sdílet! Děkujeme za Váš čas