高度なReactJS:React + Redux + Sagasのベストプラクティス

思考のためのコーヒー

まず最初に、Reactとは何かを簡単に紹介します。これは、ユーザーインターフェイスの構築に使用されるJavaScriptライブラリです。それが登場して以来、フロントエンドの開発状況を変えてきました。したがって、フロントエンドWeb開発者になりたい場合、ReactやVue.jsのようなライブラリを学習することは、今日の業界ではほとんど不可欠です。 Reactを学習し始めたばかりの場合の素晴らしいチュートリアルです。 https://reactjs.org/tutorial/tutorial.html。

Reactを学び始めたときのことを覚えています。必要なものすべてを学べないという不安を常に抱いていました。常に変化するJavaScript言語が頭に浮かんでいます。それをするために?文字通り何百ものオンラインチュートリアル、Youtube検索、未完成の(そしておそらく未洗浄の)コーヒーを飲んだ後、私はついにReactがJavaScriptテーブルに何をもたらそうとしているかをしっかりと把握しました。

ただし、Reactのすべての高度な概念を1つのコンパクトなチュートリアルにまとめたチュートリアルを見つけるのに苦労していました。

また、これらの概念が大きなソースコード内で使用されたとき、これらの概念を理解するのに苦労したことを覚えています。それがこの記事が埋めようとしているギャップです。高度なツールと概念がシンプルなアプリに組み込まれています。これはチュートリアルを目的としたものであり、アプリで必要ない場合はこれらの概念を使用しないでください。

チャットで十分。コードを話しましょう。このレポから完成したコードをダウンロードし、READMEに従って、ここでビルドする内容を確認してください。 https://github.com/jelorivera08/react-starter-pack。

アプリのランディングページ

上記では、表示されるカウント状態と、それぞれのアクションをトリガーする4つのボタンを確認できます。彼らの行動は自明です。

セレクター

Counterコンテナー内のselectors.jsファイルに進みます。ここで取り組んでいる最初の高度な概念はcreateSelectorです。コードを見ると、まず、const count変数はstate.get( 'count')を使用してredux状態ツリー内のcount状態を取得します。

次に、上記のメソッドを使用してセレクターを作成します。これにより、redux状態ツリーから受け取る状態/データをフォーマットできます。これを行うことで、前面に何かをレンダリングする必要があるたびに、状態の再構築またはターゲット状態のフォーマットを処理する新しい関数をコーディングする時間を大幅に節約できます-終わり。この例では、受け取った状態を変更しませんでした。デモ用にプレーン状態を返しました。

次に、結果の関数はmapStateToProps内で使用され、mapStateToPropsでは、当然、次に構成するのはmapDispatchToPropsです。

アクションを作成する

レデューサーアクションをディスパッチするときは常に、アプリケーションの状態を変更するために、後で入力するレデューサーに対してそのタイプと対応するスイッチケースを宣言する必要があります。 reduxsauceのcreateActionsパッケージを使用すると、1石で2羽の鳥を攻撃できます。このパッケージのメリットを十分に活用するには、reducerをreduxsauceでフォーマットする必要もあります。

減速機

上記はアプリのレデューサーです。初期状態は不変からfromJS APIに囲まれており、パッケージ名が適用されると、初期状態が変更されないように保護します。 Reactはこの概念に対して非常に厳しいので、常にこれを念頭に置いてください。 reduxsauceのcreateReducer APIには2つの引数があります。

最初に、初期状態。 2番目に、アクションタイプのキーと、タイプがディスパッチ呼び出しに一致したときにリデューサーが起動する関数としての値を持つオブジェクト。マージは、それに応じてredux状態ツリーを変更します。非同期API呼び出しを正しく処理する方法を知らない実際のアプリはありませんか?右。

Redux Saga

これが私たちのプログラムの一部です。アクションを呼び出す方法を除き、すべて同じです。以前に作成したtypeアクションを利用し、watcher saga内でそれらを利用して、後でredux状態ツリーに影響する非同期呼び出しをディスパッチします。

遅延は、ネットワーク遅延を模擬して、アプリの非同期感をより良くするためのものです。そして最後に、パフォーマンスを忘れないようにしましょう。

コード分​​割

コード分​​割は、Webアプリケーションのパフォーマンスを向上させる優れた方法です。 JavaScriptコードは、ユーザーのデータに最も負担をかけます。コード分​​割により、エンドユーザーはデータ消費効率のために必要なコードの部分のみをダウンロードできることに注意してください。

結論として、

ソフトウェアエンジニアは、よりクリーンで効率的なコードを作成するのに役立つ多くのパッケージとツールがあります。コスト、基礎となるシステムを理解するコスト、およびReactで考えているコストが付属しています。

Reactを学習するには、コーディングパラダイムを、以前のフロントエンドでのコーディングの考え方と比較して、はるかに異なるものにシフトする必要があります。この記事で説明したツールとパッケージは、Reactで美しく効率的にコーディングするために必要な原則をカプセル化したものであり、それこそが優れた開発者です。

それはいつもささいなことです。

これで、この小さな記事で、Reactの理解を深めていただけると幸いです。乾杯!