Nader Dabit
Nader Dabit

Følg

Maj 1, 2017 * 5 min læst

ReSub er et bibliotek udgivet af Microsoft + Open Source til skrivning af React-komponenter, der automatisk administrerer abonnementer på datakilder ved blot at få adgang til dem.

det foreslår brugen af TypeScript. Fra deres dokumenter:

det er fint at bruge ReSub uden TypeScript, men uden adgang til TypeScript metode dekoratører, butikker og komponenter kan ikke udnytte autosubscriptions, og som sådan, mister en masse af deres værdi.

ReSub ville falde i de samme kategorier som.

efter min mening er det nærmeste, jeg vil sammenligne dette med, Mob. ReSub-biblioteket administrerer automatisk abonnementer på datakilder ved blot at få adgang til dem, og har været rigtig rart at arbejde med i mit eksperiment indtil videre, hvilket reducerer standardpladen og tilbyder en letforståelig API.

i dette indlæg vil jeg gennemgå, hvordan man opretter et nyt React Native-projekt og implementerer ReSub som en måde at styre staten på. Vi gør det ved at oprette en meget grundlæggende todo-app.

den endelige kode for dette eksempel er placeret her, og er i resub-medium-example grenen.

for at komme i gang opretter vi først et nyt React Native-projekt, konfigurerer TypeScript, tilføjer og konfigurerer tsconfig.json og installerer de nødvendige React and React Native-typer såvel som ReSub-afhængigheden.

  1. Opret projektet og skift derefter til mappen
react-native init rnresub// then cd into directory after project is createdcd rnresub

2. Installer TypeScript (i denne tutorial bruger vi version 2.3.2)

npm i typescript --save-dev

3. Installer typer

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

4. Installer ReSub

npm i resub --save

5. Opret tsconfig.json

touch tsconfig.json

i tsconfig.json tilføj følgende 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":
}

i ovenstående config sætter vi et par ting op som vores rodmappe (rootDir, i vores app src) og build output directory (outDir, i vores app build).

outputmappen (build) oprettes for os, når typescript er kompileret.

det betyder, at vi nu skal gå videre og oprette src – mappen, hvor vi skal skrive alle vores TypeScript.

tilføj derefter et build-script til din pakke.json i scripts:

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

med dette script kan vi ringe npm run build fra vores kommandolinje, og det vil starte typescript-kompilatoren. Flagget -w fortæller kompilatoren at se filerne for eventuelle ændringer, og når ændringer sker, kompilerer den automatisk koden igen.

i project root skal du oprette src-mappen med to filer: et indgangspunkt (App.tsx) og en butik(TodoStore.tsx). Butikken vil være vores datalager.

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

nu hvor vores filer og afhængigheder er oprettet, lad os Opdatere indekset.ios.JS eller indeks.Android.js fil til at bruge den kode, der vil blive udarbejdet af TypeScript.

i indeks.ios.JS eller indeks.Android.JS, Opdater filen til følgende:

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

nu kan vi gå om at skabe vores butik.

I TodosStore.følgende klasse, som vi vil gå gennem trin for trin:

  1. øverst i filen importerer vi StoreBase, som er den basisklasse, som ReSub giver os, og hvad vi vil udvide til at oprette vores butik, samt to dekoratører, der holder dataene synkroniseret (autoSubscribeWithKeyog autoSubscribeStore).
  2. øverst i klassen opretter vi to variabler: en _todos array og en _textInputValue streng.
  3. metoden updateTextInputValue tager en værdi fra en tekstindtastning og opdaterer derefter _textInputValue med værdien overført til metoden.
    når vi har gjort dette, kalder vi this.trigger(TriggerKeys.InputTextKey), som udløser alle abonnementer, der abonnerer ved hjælp af autoSubscribeWithKey(TriggerKeys.InputTextKey) dekoratøren, opdatering af komponenter, der bruger disse data med de opdaterede lagerdata.
    trigger() er tilgængelig som en metode til StoreBase, som vi udvidede til at oprette vores butik.
  4. addTodo vil først kontrollere, at der er en værdi, der skal tilføjes, og hvis ikke vil vende tilbage uden at gøre noget.
    ellers tager vi det eksisterende _textInputValue såvel som det eksisterende todos-array og opretter derefter et nyt array, der passerer det nye todo som det sidste element i arrayet.
    når det nye array er oprettet, opdaterer vi _textInputValue for at være en tom streng og kalder igenthis.trigger()
  5. getTodos returnerer listen over _todos. Vi tilføjer autoSubscribeWithKey(TriggerKeys.TodosChangedKey) dekoratøren for at sikre, at når dataene ændres, opdateres enhver komponent, der bruger disse data.
  6. getTextInputValue gør det samme som getTodos gør, men for _textInputValue værdien

nu hvor butikken er færdig, lad os oprette den sidste fil, vi bruger, App.tsk.

der er en hel del foregår her, og jeg vil gå igennem det næste, men det er virkelig en temmelig grundlæggende implementering, med et par ting, der er specifikke for ReSub, især jeg tror er, at vi udvider ComponentBase klasse af ReSub vs Component klasse af React.

  1. vi importerer de afhængigheder, vi har brug for til filen
  2. vi opretter en State interface, og i den erklærer vi en todos array og en todo streng
  3. vi udvider ComponentBase klassen af Resub, som giver os ikke kun de livscyklusmetoder, som vi er vant til i React, men også et par andre nyttige metoder, især _buildState hvilket er, hvad vi vil bruge til at binde vores komponent tilstand med butikken tilstand. Tjek de linkede buildState docs for at lære mere om _buildState, men det er dybest set en metode, der kaldes til at genopbygge modulets tilstand, når butikken opdateres.
  4. resten af denne komponent er et par grundlæggende metoder, der opdaterer butikken todos array, butikken _textInputValue og tilføjer noget styling.

nu i terminalen, Kør typescript:

npm run build

kør derefter React Native-appen i din emulator, og vi skulle se en fungerende todo-app!

igen er koden til dette eksempel placeret her.

mit Navn er Nader Dabit . Jeg arbejder med projekter som AppSync og Amplify, og grundlæggeren af React Native Training.

hvis du kan lide React and React Native, tjek vores podcast-React Native Radio på Devchat.tv.

tjek også min bog, React Native in Action nu tilgængelig fra Manning Publications

hvis du nød denne artikel, bedes du anbefale og dele den! Tak for din tid