Nader Dabit
Nader Dabit

kövesse

május 1, 2017 * 5 perc olvasni

ReSub egy könyvtár által kiadott Microsoft + Open Source írására reagál komponensek, amelyek automatikusan kezeli előfizetések adatforrások egyszerűen elérve őket.

a TypeScript használatát javasolja. A dokumentumokból:

rendben van a ReSub használata TypeScript nélkül, de a TypeScript metódusaihoz való hozzáférés nélkül a dekorátorok, üzletek és összetevők nem tudják kihasználni az automatikus előfizetéseket, és mint ilyen, sokat veszítenek értékükből.

a ReSub ugyanabba a kategóriába tartozik, mint a Redux vagy a MobX.

véleményem szerint a legközelebb a MobX-hez hasonlítanám. A ReSub könyvtár automatikusan kezeli az adatforrások előfizetéseit, egyszerűen elérve őket, és eddig nagyon jó volt dolgozni a kísérleteim során, csökkentve a boilerplate-t és könnyen érthető API-t kínálva.

ebben a bejegyzésben végigvezetem, Hogyan hozzunk létre egy új React Native projektet, és valósítsuk meg a ReSub-ot az állam kezelésének módjaként. Ezt egy nagyon alapvető todo alkalmazás létrehozásával fogjuk megtenni.

a példa végső kódja itt található, és a resub-medium-example ágban található.

a kezdéshez először létrehozunk egy új React Native projektet, beállítjuk a TypeScript-et, hozzáadjuk és konfiguráljuk a tsconfig.json – t, és telepítjük a szükséges React és React Native típusokat, valamint a ReSub függőséget.

  1. hozza létre a projektet, majd váltson a könyvtárba
react-native init rnresub// then cd into directory after project is createdcd rnresub

2. Telepítse a TypeScript-et (ebben az oktatóanyagban a verziót használjuk 2.3.2)

npm i typescript --save-dev

3. Telepítési típusok

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

4. Resub Telepítése

npm i resub --save

5. Létrehozás tsconfig.json

touch tsconfig.json

a tsconfig.json – ben adja hozzá a következő konfigurációt:

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

a fenti konfigurációban néhány dolgot beállítunk, például a gyökérkönyvtárunkat (rootDir, az app src alkalmazásban) és a build kimeneti könyvtárat (outDir, az app buildben).

a kimeneti könyvtár (build) a gépírás fordításakor jön létre számunkra.

ez azt jelenti, hogy most meg kell hoznunk a src könyvtárat, ahol az összes gépírást megírjuk.

ezután adjon hozzá egy build szkriptet a csomaghoz.JSON a szkriptekben:

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

ezzel a parancsfájllal hívhatjuk a npm run build parancsot a parancssorból, és ez elindítja a typescript fordítót. A -w jelző megmondja a fordítónak, hogy figyelje a fájlokat bármilyen változásért, és amikor változások történnek, automatikusan újrafordítja a kódot.

a projekt gyökerében hozza létre az src könyvtárat két fájllal: egy belépési ponttal (App.tsx) és egy tárolóval(TodoStore.tsx). Az áruház a mi adattárunk lesz.

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

most, hogy a fájlok és a függőségek be vannak állítva, frissítsük az indexet.Io.js vagy index.android.js fájl a TypeScript által összeállított kód használatához.

az indexben.Io.js vagy index.android.js, frissítse a fájlt a következőkre:

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

most elkezdhetjük létrehozni a boltunkat.

A TodosStore-Ban.tsx, hozza létre a következő osztályt, amelyet lépésről lépésre végig fogunk járni:

  1. a fájl tetején importáljuk a StoreBase – et, amely az alaposztály, amelyet a ReSub ad nekünk, és amit kiterjesztünk az üzletünk létrehozására, valamint két dekorátort, amelyek szinkronban tartják az adatokat (autoSubscribeWithKey és autoSubscribeStore).
  2. az osztály tetején két változót hozunk létre: egy _todos tömböt és egy _textInputValue karakterláncot.
  3. a updateTextInputValue metódus bevesz egy értéket egy szövegbevitelből, majd frissíti a _textInputValue értéket a metódusba átadott értékkel.
    miután ezt megtettük, hívjuk this.trigger(TriggerKeys.InputTextKey) amely elindítja az összes előfizetést, amely feliratkozott a autoSubscribeWithKey(TriggerKeys.InputTextKey) dekorátor segítségével, frissítve azokat az összetevőket, amelyek ezeket az adatokat használják a frissített tárolási adatokkal.
    trigger() áll rendelkezésre, mint a módszer StoreBase, amely kiterjesztette, hogy hozzon létre a boltban.
  4. addTodo először ellenőrzi, hogy van-e hozzáadott érték, és ha nem, akkor vissza fog térni anélkül, hogy bármit is tenne.
    ellenkező esetben a meglévő _textInputValue – et, valamint a meglévő todos tömböt vesszük, majd létrehozunk egy új tömböt, átadva az új todo-t a tömb utolsó elemeként.
    az új tömb létrehozása után frissítjük a _textInputValue – et, hogy üres karakterlánc legyen, majd ismét meghívjuk this.trigger()
  5. getTodos visszaadja a _todos listát. Hozzáadjuk a autoSubscribeWithKey(TriggerKeys.TodosChangedKey) dekorátort, hogy megbizonyosodjunk arról, hogy amikor az adatok megváltoznak, az ezeket az adatokat használó bármely összetevő frissül.
  6. getTextInputValue ugyanazt csinálja, mint getTodos, de a _textInputValue értékhez

most, hogy az áruház elkészült, hozzuk létre az utolsó fájlt, amelyet használni fogunk, kb.tsx.

van egy kicsit folyik itt, és megyek át rajta a következő, de ez tényleg egy elég alapvető végrehajtását, néhány dolgot, amelyek specifikusak ReSub, leginkább azt hiszem, hogy bővítjük a ComponentBase osztály ReSub vs a Component osztály reagál.

  1. importáljuk a
  2. fájlhoz szükséges függőségeket, létrehozunk egy State interfészt, és ebben deklarálunk egy todos tömböt és egy todo karakterláncot
  3. kiterjesztjük a ComponentBase Resub osztályt, amely nemcsak a Reactben megszokott életciklus-módszereket adja meg, hanem néhány más hasznos módszert is, nevezetesen _buildState ez az, amit használni fogunk, hogy összekapcsoljuk a komponens állapotunkat az áruház állapotával. Nézze meg a csatolt buildState dokumentumokat, hogy többet tudjon meg a _buildState – ről, de alapvetően egy módszert hívnak meg a modul állapotának újjáépítésére, amikor az áruház frissül.
  4. ennek az összetevőnek a többi része néhány alapvető módszer, amely frissíti a store todos tömböt, a store _textInputValue – et, és hozzáad néhány stílust.

most a terminálon futtassa a typescript programot:

npm run build

ezután futtassa a React Native alkalmazást az emulátorában, és látnunk kell egy működő todo alkalmazást!

Ismét itt található a példa kódja.

a nevem Nader Dabit . Az AWS Mobile fejlesztői szószólója vagyok, olyan projektekkel dolgozom, mint az AppSync és az Amplify, valamint a React Native Training alapítója.

Ha szereted a React-et és a React Native-ot, nézd meg a podcast-React Native Radio – t Devchat.tv.

továbbá, nézd meg a könyvemet, React Native in Action most elérhető a Manning Publications

ha tetszett ez a cikk, kérjük, ajánlja és ossza meg! Köszönöm az idejét