ReSubは、データソースにアクセスするだけで自動的にサブスクリプションを管理するReactコンポーネントを作成するためのMicrosoft+オープンソース
それはTypeScriptの使用を示唆しています。 彼らのドキュメントから:
TypeScriptなしでReSubを使用するのは問題ありませんが、TypeScriptのメソッドデコレータにアクセスできないと、ストアやコンポーネントはautosubscriptionsを活用できず、その値
ReSubはReduxやMobXと同じカテゴリに分類されます。
私の意見では、私がこれを比較する最も近いものはMobXです。 ReSubライブラリは、データソースにアクセスするだけで自動的にサブスクリプションを管理し、これまでの実験では定型文を削減し、理解しやすいAPIを提この記事では、新しいReact Nativeプロジェクトを設定し、状態を管理する方法としてReSubを実装する方法について説明します。 私たちは非常に基本的なtodoアプリを作成することによってそうします。
この例の最後のコードはここにあり、resub-medium-exampleブランチにあります。
始めるために、まず新しいReact Nativeプロジェクトを作成し、TypeScriptをセットアップし、tsconfig.jsonを追加して設定し、必要なReactとReact NativeタイプとReSub依存関係をインストールし
- プロジェクトを作成し、ディレクトリに変更します
react-native init rnresub// then cd into directory after project is createdcd rnresub
2. TypeScriptをインストールします（このチュートリアルでは、バージョンを使用しています2.3.2)
npm i typescript --save-dev
3. インストールタイプ
npm i @types/react-native @types/react --save-dev
4. 再サブをインストールする
npm i resub --save
5. 作成tsconfig.json
touch tsconfig.json
tsconfig.jsonに次の設定を追加します:
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"jsx": "react",
"outDir": "build",
"rootDir": "src",
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"experimentalDecorators": true,
"preserveConstEnums": true,
"allowJs": true,
"sourceMap": true
},
"exclude":
}
上記の設定では、ルートディレクトリ（rootDir、アプリsrc）やビルド出力ディレクトリ（outDir、アプリビルド）など、いくつかの設定を行っています。
typescriptのコンパイル時に出力ディレクトリ(build)が作成されます。
つまり、先に進んでsrcディレクトリを作成する必要があることを意味します。
次に、パッケージにビルドスクリプトを追加します。スクリプト内のjson:
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"build": "tsc -w"
},
このスクリプトを使用すると、コマンドラインからnpm run buildを呼び出すことができ、typescriptコンパイラが起動します。 -wフラグは、コンパイラにファイルの変更を監視するように指示し、変更が発生するとコードを自動的に再コンパイルします。
プロジェクトルートで、エントリポイント(App.tsx)とストア(TodoStore.tsx)の二つのファイルを持つsrcディレクトリを作成します。 ストアは当社のデータストアになります。
mkdir src
touch src/App.tsx src/TodosStore.tsx
ファイルと依存関係が設定されたので、インデックスを更新しましょう。イオスjsまたはインデックス。アンドロイド…TypeScriptによってコンパイルされるコードを使用するjsファイル。インデックスに
。イオスjsまたはインデックス。アンドロイド…js、ファイルを次のように更新します:
import React, { Component } from 'react'import {
AppRegistry
} from 'react-native'import App from './build/App'AppRegistry.registerComponent('rnresub', () => App)
今私達は私達の店を作成することについて行くことができます。
tsx,次のクラスを作成します。,私たちはステップバイステップを歩いていきます:
- ファイルの先頭に、ReSubが提供する基本クラスである
StoreBaseと、ストアを作成するために拡張するもの、およびデータを同期させる2つのデコレータ（autoSubscribeWithKeyとautoSubscribeStore）をイン - クラスの先頭に、
_todos配列と_textInputValue文字列の2つの変数を作成します。 updateTextInputValueメソッドはテキスト入力から値を取り込み、メソッドに渡された値で_textInputValueを更新します。
これを行った後、this.trigger(TriggerKeys.InputTextKey)を呼び出し、autoSubscribeWithKey(TriggerKeys.InputTextKey)デコレータを使用してサブスクライブされているすべてのサブスクリプションをトリガーし、このデータを使用しているコンポーネtrigger()はStoreBaseのメソッドとして利用可能であり、これを拡張してストアを作成しました。addTodoは最初に追加する値があることを確認し、そうでない場合は何もせずに戻ります。
それ以外の場合は、既存の_textInputValueと既存のtodos配列を取得し、新しい配列を作成し、新しいtodoを配列の最後の項目として渡します。
新しい配列が作成されたら、_textInputValueを空の文字列に更新し、再度呼び出しますthis.trigger()-
getTodos_todosのリストを返します。 データが変更されるたびに、このデータを使用するコンポーネントが更新されるようにするために、autoSubscribeWithKey(TriggerKeys.TodosChangedKey)デコレータを追加します。 getTextInputValueはgetTodosと同じことを行いますが、_textInputValue値
ストアが完了したので、最後に使用するAppファイルを作成しましょう。tsx…
特に、ReSubのComponentBaseクラスとReactのComponentクラスを拡張していると思います。
- ファイルに必要な依存関係をインポートします
Stateインターフェイスを作成し、その中にtodos配列とtodo文字列を宣言します- Resubの
ComponentBaseクラスを拡張します。3650>これは、コンポーネントの状態をストアの状態と結びつけるために使用するものです。 リンクされたbuildState docsをチェックして_buildStateの詳細を学びますが、基本的には、ストアが更新されたときにモジュールの状態を再構築するために呼び出されるメソ - このコンポーネントの残りの部分は、store
todos配列、store_textInputValueを更新し、いくつかのスタイルを追加する基本的なメソッドのカップルです。
今、ターミナルで、typescriptを実行します:
npm run build
次に、エミュレータでReact Nativeアプリを実行すると、機能するtodoアプリが表示されます！
ここでも、この例のコードはここにあります。
私の名前はNader Dabitです。 私はAppSyncやAmplifyのようなプロジェクトを扱うAWS Mobileの開発者の提唱者であり、React Native Trainingの創設者です。
ReactとReact Nativeが好きなら、podcast—React Native Radio onをチェックアウトしてくださいDevchat.tv.
また、私の本をチェックしてください、React Native in Action Now available from Manning Publications
あなたがこの記事を楽しんだなら、それをお勧めして共有してください！
コメントを残す