Reduxについて:世界で最も簡単なReduxのガイド

これは、絶対的なRedux初心者、またはReduxの基本的な概念の理解を再評価したい人のための包括的な(しかし簡略化された)ガイドです。

詳細な目次については、このリンクをご覧ください。また、Reduxのより高度な概念については、Reduxの書籍をご覧ください。

前書き

Reduxをマスターする方法を長い間探していた場合、この記事(実際は本です)は欠落している部分です。

始める前に、この本は何よりも私に関するものであることをお伝えします。はい、私。私はReduxを学び、それを教えるより良い方法を模索しています。

数年前、私はReactを学んだばかりです。私はそれについて興奮していましたが、再び、他の誰もがReduxと呼ばれる何かについて話しているように見えました。

まあ!学習の流れは終わりますか?

私の個人的な開発に専念するエンジニアとして、私は知り合いになりたかったです。取り残されたくありませんでした。それで、私はReduxを学び始めました。

Reduxのドキュメントを確認しました。実際、かなり良かったです!何らかの理由で、私には完全にクリックされなかっただけです。たくさんのYouTubeビデオもチェックしました。私が見つけたものは急いでいるようで、詳細ではありません。かわいそう。

正直なところ、私が見たビデオチュートリアルが悪いとは思いません。何かが足りなかった。私のような健全な人のために考え抜かれて書かれた簡単なガイドであり、想像上のヒューマノイドのためではありません。

私は一人ではなかったようです。

私の良き友人で、当時私が指導していた人が、React Developer認定コースを修了したばかりで、証明書を得るために大金(300ドル以上)を支払いました。

プログラムについての彼の正直なフィードバックを求めたとき、彼の言葉は次のようなものでした:

コースはかなり良かったですが、Reduxが私のような初心者にうまく説明されたとはまだ思いません。それはうまく説明されていませんでした。

ほら、私の友人のように、Reduxを理解するのに苦労している人がたくさんいます。彼らはおそらくReduxを使用しますが、どのように機能するかを本当に理解しているとは言えません。

私は解決策を見つけることにしました。私はReduxを深く理解し、それをより明確に教える方法を見つけるつもりでした。

あなたがこれから読むものは何ヶ月も研究し、それからサンプルプロジェクトを書いて構築するのに少し時間がかかりました。

しかし、あなたは何を知っていますか?

これを皆さんと共有できることをとても楽しみにしています!

頭の中で話さないReduxガイドを検索した場合、これがそれです。これ以上探さない。

私は自分の闘争と私が知っている他の多くの闘争を考慮に入れました。重要なことは必ず教えます。混乱させずにそれを行います。

今、それは約束です。

Reduxを教えるための私のアプローチ

特に初心者向けのReduxの教育に関する本当の問題は、Reduxライブラリ自体の複雑さではありません。

いいえ、そうではありません。これは、依存関係を含む、わずか2 KBの小さなライブラリです。

初心者としてReduxコミュニティをご覧ください。すぐに気が散ってしまいます。 Reduxだけでなく、現実世界のアプリを構築するために必要な他の「関連付けられたライブラリ」がたくさんあります。

少し時間をかけて研究を行っていれば、すでにそれらに出くわしていることになります。 Redux、React-Redux、Redux-thunk、Redux-saga、Redux-promise、Reselect、Recomposeなどがあります!

それだけでは不十分であるかのように、いくつかのルーティング、認証、サーバー側レンダリング、テスト、およびバンドルが散在しています。

まあ!それは圧倒的です。

「Reduxチュートリアル」では、Reduxについてはあまり説明していませんが、その他のすべての内容はReduxについてです。

初心者向けに調整されたより健全なアプローチが必要です。あなたがヒューマノイド開発者であれば、これで問題が発生することはありません。何だと思う?私たちのほとんどは実際には人間です。

そこで、Reduxを教えるための私のアプローチを紹介します。

余分なものは少し忘れて、Reduxを実行しましょう。うん!

現時点で必要な最低限のものだけを紹介します。 React-router、Redux-form、Reselect、Ajax、Webpack、Authentication、Testingはありません。今のところはありません。

そして何だと思う?それは、あなたが持っている重要な人生の「スキル」のいくつかをすることを学んだ方法です。

どのように歩くことを学びましたか?

一日で走り始めましたか?番号!

手間をかけずに、Reduxを学習するための健全なアプローチを紹介します。

しっかり座って。

「上昇する潮がすべての船を持ち上げる」

Reduxの基本がどのように機能するのか(上昇する潮流)がわかれば、他のすべてのことを簡単に推論できます(すべてのボートを持ち上げます)。

Reduxの学習曲線に関するメモ

エリックエリオットによるReduxの学習曲線に関するツイート。

Reduxには学習曲線があります。別に言っているわけではありません。

歩くことを学ぶことには、学習曲線もありました。ただし、体系的な学習アプローチを使用すると、それを克服できます。

あなたは数回倒れましたが、それは大丈夫でした。誰かがあなたを支え、あなたが立ち上がるのを助けるためにいつも周りにいました。

さて、私はあなたのためにその人になりたいと思っています-あなたが私とReduxを学ぶように。

あなたが学ぶこと

結局のところ、Reduxは外部から見たときほど怖くないことがわかります。

基本的な原理はとても簡単です!

最初に、わかりやすい言葉でReduxの基礎をお教えします。

次に、いくつかの簡単なアプリケーションを作成します。基本的なHello Worldアプリから始めます。

基本的なHello World Reduxアプリケーション。

しかし、それらは十分ではありません。

私もあなたが取り組むべきだと思うエクササイズと問題を含めます。

一緒に取り組むサンプルエクササイズアプリ。

効果的な学習とは、単に読んだり聞いたりすることではありません。効果的な学習は、主に練習に関するものです!

これらを宿題と考えてください。ただし、怒っている教師はいません。エクササイズの練習中に、ハッシュタグ#UnderstandingReduxを使ってツイートできます。ぜひご覧ください。

怒っている先生はいませんか?

エクササイズは良いですが、あなたは私がより大きなアプリケーションを構築するのを見る必要もあります。ここで、Skypeクローンのような甘いメッセージングアプリであるSkypeyを構築することで物事をまとめます。

Skypey:一緒に構築するSkypeクローン。

Skypeyには、メッセージの編集、メッセージの削除、複数の連絡先へのメッセージ送信などの機能があります。

ほら!

それがあなたを興奮させなかったなら、私は何をするのか分かりません。これらをお見せできることをとても楽しみにしています!

ジョナ・ディンゲスのGIF

前提条件

唯一の前提条件は、Reactを既に知っていることです。そうでなかったら、Dave CeddiaのPure Reactは、$$がいくらかあれば個人的に推奨されます。私はアフィリエイトではありません。それはちょうど良いリソースです。

オフラインで読むためのPDFとEpubをダウンロードする

以下のビデオでは、PDFおよびEpubバージョンの本を入手するためのプロセスを紹介しています。

核心はこれです:

  1. 書籍の販売ページにアクセスしてください。
  2. クーポンFREECODECAMPを使用して価格を100%引きすると、29ドルの本が0ドルで手に入ります。
  3. 感謝の気持ちを伝えたい場合は、この記事をお勧めします—中拍手アイコンをクリックして押したままにします。 +50。

さあ、始めましょう。

第1章:Reduxを理解する

数年前、フロントエンドアプリケーションの開発は多くの人にとって冗談のようでした。最近では、適切なフロントエンドアプリケーションの構築がますます複雑になっています。

常に要求の厳しいユーザーの差し迫った要件を満たすために、優しくてかわいい猫は家の範囲を大きくしすぎたようです。 3インチの爪と口が人間の頭に収まるように大きく開く大胆不敵なライオンになります。

ええ、それは最近のフロントエンド開発が最近感じていることです。

Angular、React、Vueのような現代のフレームワークは、この「獣」を飼いならすのに素晴らしい仕事をしました。同様に、この「獣」に冷たい薬を与えるために、Reduxによって実施されるような現代の哲学も存在します。

これらの哲学をご覧になりながら、フォローしてください。

Reduxとは何ですか?

Reduxとは何ですか? Reduxドキュメントで見られるように

Reduxの公式ドキュメントは次のとおりです。

Reduxは、JavaScriptアプリの予測可能な状態コンテナーです。

私がそれらを最初に読んだとき、それらの9つの単語は90の不完全なフレーズのように感じました。わかりませんでした。おそらくそうでもないでしょう。

汗をかかないでください。これについては少し後ほど説明しますが、Reduxをさらに使用すると、その文章がより明確になります。

明るい面では、ドキュメントをもう少し読むと、そこのどこかにもっと説明的なものがあります。

それは読みます:

一貫して動作するアプリケーションを作成するのに役立ちます…

見えますか

素人の言葉で言えば、「獣を飼いならすのに役立ちます」ということです。比phor的に。

Reduxは、大規模なアプリケーションの状態管理に伴う面倒な作業の一部を取り除きます。開発者に優れたエクスペリエンスを提供し、アプリのテスト容易性がこれらのいずれにも犠牲にならないようにします。

Reactアプリケーションを開発する際に、すべての状態を最上位コンポーネントに保持するだけでは不十分な場合があります。

また、時間の経過とともにアプリケーションで多くのデータが変更される場合があります。

Reduxは、この種の問題の解決に役立ちます。気を付けて、それは唯一の解決策ではありません。

Reduxを使用する理由

既にご存知のように、「AをBで使用する理由」などの質問は、個人的な好みに要約されます。

Reduxを使用しないアプリを実稼働環境で構築しました。多くの人が同じことをしたと確信しています。

私にとっては、チームメンバーに複雑な層を追加することが心配でした。ご参考までに、この決定を後悔していません。

Reduxの作者であるDan Abamovも、アプリケーションにReduxを早めに導入する危険性について警告しています。 Reduxは気に入らないかもしれませんが、それで十分です。持っていない友達がいます。

とはいえ、Reduxを学ぶには非常に適切な理由がいくつかあります。

たとえば、動く部分が多い大規模なアプリでは、状態管理が大きな関心事になります。 Reduxは、パフォーマンスの問題やテスト容易性を犠牲にすることなく、非常にうまく機能します。

多くの開発者がReduxを愛するもう1つの理由は、Reduxに付属する開発者エクスペリエンスです。他の多くのツールも同様のことを始めていますが、Reduxには大きな功績があります。

Reduxを使用すると、ロギング、ホットリロード、タイムトラベル、ユニバーサルアプリ、記録と再生など、開発者としての作業をあまり行わずにすみます。これらを使用して自分で確認するまで、これらのことはおそらく空想的に聞こえます。

タイムトラベルでのホットリロードと呼ばれるダンの講演は、これらの仕組みを理解するのに役立ちます。

また、Reduxのメンテナーの1人であるMark Ericssonは、実稼働環境のReactアプリの60%以上がReduxを使用していると言います。それは沢山!

その結果、これは単なる私の考えです。多くのエンジニアは、ReactとReduxで構築された大規模な実稼働コードベースを維持できることを潜在的な雇用者に示したいので、Reduxを学びます。

Reduxを使用するその他の理由が必要な場合は、Reduxの作成者であるDanが、Mediumに関する記事で強調した理由がいくつかあります。

自分をシニアエンジニアと見なさない場合は、主にReduxが教えているいくつかの原則のため、Reduxを学ぶことをお勧めします。一般的なことを行う新しい方法を学びます。これにより、より優れたエンジニアになる可能性があります。

誰もが異なるテクノロジーを採用する理由は異なります。最後に、呼び出しはあなたのものです。しかし、Reduxをスキルセットに追加しても、間違いなく害はありません。

Reduxを5歳に説明する

本のこのセクションは本当に重要です。ここでの説明は、本を通して参照されます。準備をしなさい。

5歳には専門用語がないため、これは非常にシンプルですが、Reduxを学習する目的に関連しています。

だから、ここに行きます!

おそらくおなじみのイベントを考えてみましょう-現金を引き出すために銀行に行きます。これを頻繁に行わなくても、プロセスがどのように見えるかはご存知でしょう。

若いジョーは銀行に向かいます。

ある朝起きて、できるだけ早く銀行に向かいます。銀行に行く間、念頭に置いた意図/アクションは1つだけです:WITHDRAW_MONEYへ。

あなたは銀行からお金を引き出したいです。

若いジョーは、いくらかのお金を引き出すつもりで銀行に向かいます。

ここからがおもしろいところです。

銀行に入ると、キャッシャーに直行してリクエストを知らせます。

若いジョーは銀行にいます!彼はキャッシャーを見るためにまっすぐに行き、彼の要求を知らせます。

待って、キャッシャーに行った?

なぜあなたはお金を得るために銀行の金庫室に行っただけではありませんか?

Young JoeのみがVaultにアクセスした場合。彼は見つけた分だけ持ち帰ります。

結局のところ、それはあなたの苦労して稼いだお金です。

ご存知のように、物事はそのようには機能しません。はい、銀行には金庫にお金がありますが、あなたは自分のお金を引き出すための正当なプロセスに従うのを助けるためにキャッシャーと話す必要があります。

キャッシャーは、彼らのコンピューターから、いくつかのコマンドを入力し、あなたに現金を届けます。簡単です。

お金を得る方法は次のとおりです。 Vaultからではなく、ごめんなさい。

さて、Reduxはこのストーリーにどのように適合しますか?

すぐに詳細を説明しますが、最初に用語について説明します。

1.銀行の金庫は、ReduxストアがReduxである銀行に向けられています。

銀行の金庫はReduxストアに例えることができます!

銀行の金庫はお金を銀行に預けていますよね?

アプリケーション内では、お金をかけません。代わりに、アプリケーションの状態はあなたが使うお金のようなものです。アプリケーションのユーザーインターフェイス全体は、状態の関数です。

銀行の金庫が銀行であなたのお金を安全に保つように、アプリケーションの状態はストアと呼ばれるものによって安全に保たれます。したがって、ストアは「お金」または状態をそのまま保持します。

これを覚えておく必要がある

Redux Storeは、Bank Vaultに例えることができます。アプリケーションの状態を保持し、安全に保ちます。

これは、最初のRedux原則につながります。

単一の真実のソースがある:アプリケーション全体の状態は、単一のReduxストア内のオブジェクトツリーに格納されます。

言葉に惑わされないでください。

簡単に言えば、Reduxでは、アプリケーションの状態をReduxストアで管理される単一のオブジェクトに保存することをお勧めします。銀行のホールのいたるところにお金を散らかすのではなく、1つの金庫室があるようなものです。

最初のRedux Princple

2.アクションを考慮して銀行に移動します。

銀行からお金を得る場合、お金を引き出すために何らかの意図または行動をとる必要があります。

銀行に足を踏み入れて歩き回るだけでは、誰もお金をくれません。あなたも、セキュリティによって捨てられるかもしれません。悲しいもの。

Reduxについても同じことが言えます。

必要なだけコードを記述しますが、(ReactのsetStateで行うように)Reduxアプリケーションの状態を更新する場合は、アクションでReduxに通知する必要があります。

適正なプロセスに従って銀行から自分のお金を引き出すのと同じように、Reduxはアプリケーションの状態を変更/更新するための適正なプロセスも考慮します。

現在、これはReduxの原則#2につながっています。

状態は読み取り専用です:
状態を変更する唯一の方法は、何が起こったかを説明するオブジェクトであるアクションを発行することです。

それは平易な言葉ではどういう意味ですか?

銀行に行くときは、明確な行動を念頭に置いてそこに行きます。この例では、いくらかのお金を引き出します。

単純なReduxアプリケーションでそのプロセスを表すことを選択した場合、銀行に対するアクションはオブジェクトで表すことができます。

次のようなもの:

{
  タイプ:「WITHDRAW_MONEY」、
  金額:「$ 10,000」
}

Reduxアプリケーションのコンテキストでは、このオブジェクトはアクションと呼ばれます!常に、実行するアクションを記述するタイプフィールドがあります。この場合、WITHDRAW_MONEYです。

Reduxアプリケーションの状態を変更/更新する必要があるときはいつでも、アクションをディスパッチする必要があります。

2番目のReduxの原則。

まだこれを行う方法を強調しないでください。ここに基礎を置くだけです。すぐに多くの例について掘り下げます。

3.キャッシャーは、レデュースに対するレデューサーとは銀行に対するものです。

さて、一歩下がってください。

上記の話では、銀行の金庫に直接入って銀行からお金を回収することはできませんでした。いいえ。最初にキャッシャーを見る必要がありました。

さて、あなたはアクションを念頭に置いていましたが、そのアクションを誰か-キャッシャー-に伝えなければなりませんでした。

キャッシャーとVaultの通信!

Reduxについても同じことが言えます。

キャッシャーにアクションを知らせるように、Reduxアプリケーションでも同じ操作を行う必要があります。アプリケーションの状態を更新する場合は、アクションをレデューサーに伝えます。レジューサーは独自のキャッシャーです。

このプロセスは、主にアクションのディスパッチと呼ばれます。

派遣はただの英単語です。この例およびReduxの世界では、アクションをレデューサーに送信することを意味するために使用されます。

減速機は何をすべきかを知っています。この例では、WITHDRAW_MONEYに対してアクションを実行し、お金を確実に受け取るようにします。

Reduxの用語では、あなたが使うお金はあなたの州です。したがって、リデューサーは何をすべきかを知っており、常に新しい状態を返します。

うーん。把握するのはそれほど難しくなかったでしょう?

そして、これは最後のRedux原則につながります。

アクションによる状態ツリーの変換方法を指定するには、純粋なレデューサーを作成します。

進むにつれて、「純粋な」減速機の意味を説明します。今のところ、重要なのは、ReactのsetStateで行うように、アプリケーションの状態を更新するために、新しい状態を取得するためにアクションが常にリデューサーに送信(ディスパッチ)される必要があることを理解することです。

3番目のReduxの原則

この類推で、最も重要なReduxアクターが何であるか、つまりストア、レデューサー、およびアクションの概念を理解できるはずです。

これら3つのアクターは、R​​eduxアプリケーションにとって極めて重要です。それらがどのように機能するかを理解すると、行為の大部分は完了します。

第2章:初めてのReduxアプリケーション

言葉による指導の妥当性には真の限界があるため、例と直接的な経験から学びます。
マルコム・グラッドウェル

Reduxの原則を忘れられない方法で十分に説明してきましたが、言葉による指示には限界があります。

原則の理解を深めるために、例を示します。最初のReduxアプリケーション(呼び出したい場合)。

私の教育へのアプローチは、ますます困難になる例を紹介することです。そのため、この例では、初心者向けに、単純な純粋なReactアプリをリファクタリングしてReduxを使用することに焦点を当てています。

ここでの目的は、単純なReactプロジェクトでReduxを導入する方法を理解し、Reduxの基本概念の理解を深めることです。

準備はいい?

以下は、これから作業する些細な「Hello World」Reactアプリです。

基本的なHello Worldアプリ。

笑わないで。

Reduxの筋肉を、Reactなどの「既知の」概念から「未知の」Reduxに屈曲させる方法を学びます。

React Hello Worldアプリケーションの構造

使用するReactアプリは、create-react-appでブートストラップされています。したがって、アプリの構造は、すでに慣れているものです。

従う場合は、Githubからレポジトリを取得できます。これをお勧めします。

コンポーネントをDOMにレンダリングするindex.jsエントリファイルがあります。

メインAppコンポーネントは、特定のコンポーネントで構成されています。

このコンポーネントはtech propを取り込み、このpropはユーザーに表示される特定のテクノロジーを担当します。

たとえば、は次を生成します。

デフォルトの状態「React」を持つ基本的なHello Worldアプリ

また、は以下を生成します。

基本的なHello Worldアプリと技術プロップが「Redux」に変更されました

これで要点がわかります。

Appコンポーネントは次のようになります。

src / App.js

import React、{Component} from "react";
「./HelloWorld」からHelloWorldをインポートします。

クラスAppはComponentを拡張します{
 状態= {
  tech:「React」
}
render(){
  return 
}
}

デフォルトのアプリをエクスポートします。

状態オブジェクトをよく見てください。

状態オブジェクトには、techというフィールドが1つだけあり、下に示すように、HelloWorldコンポーネントにpropとして渡されます。

HelloWorldコンポーネントの実装については心配しないでください。まだです。それは単に技術の小道具を取り、いくつかの派手なCSSを適用します。それで全部です。

これは主にReduxに焦点を当てているため、スタイリングの詳細は省略します。

だから、ここに挑戦です。

Reduxを使用するようにアプリをリファクタリングするにはどうすればよいですか?

状態オブジェクトを削除して、Reduxで完全に管理するにはどうすればよいですか? Reduxはアプリの状態マネージャーであることに注意してください。

次のセクションでこれらの質問に答えましょう。

Reduxの知識の再検討

公式ドキュメントからの引用を覚えていますか?

Reduxは、JavaScriptアプリの予測可能な状態コンテナーです。

上記の文の重要なフレーズの1つは状態コンテナです。

技術的には、アプリケーションの状態をReduxで管理する必要があります。

これがReduxを状態コンテナにする理由です。

Reactコンポーネントの状態はまだ存在しています。 Reduxはそれを取り去りません。

ただし、Reduxはアプリケーション全体の状態を効率的に管理します。銀行の金庫室のように、それを行うための店舗があります。

ここにある単純なコンポーネントの場合、状態オブジェクトは単純です。

ここにあります:

{
 tech:「React」
}

これをコンポーネントの状態から取り出し、Reduxで管理する必要があります。

以前の説明から、Bank VaultとRedux Storeの類似点を覚えておく必要があります。 Bank Vaultはお金を保持し、Reduxストアはアプリケーション状態オブジェクトを保持します。

それでは、Reduxを使用するためにコンポーネントをリファクタリングする最初のステップは何ですか?

ええ、あなたはそれを正しくしました。

内からコンポーネントの状態を削除します。

Reduxストアは、アプリの状態の管理を担当します。そうは言っても、App />から現在の状態オブジェクトを削除する必要があります。

import React、{Component} from "react";
「./HelloWorld」からHelloWorldをインポートします。

クラスAppはComponentを拡張します{
 //状態オブジェクトが削除されました。
render(){
  return 
}
}

デフォルトのアプリをエクスポートします。

上記の解決策は不完全ですが、現在、には状態がありません。

コマンドラインインターフェース(CLI)からyarn add reduxを実行してReduxをインストールしてください。正しいことをするにはreduxパッケージが必要です。

Reduxストアの作成

がその状態を管理しない場合、アプリケーションの状態を管理するためにReduxストアを作成する必要があります。

銀行の金庫の場合、おそらく安全な貯金施設を作るために数人の機械エンジニアが雇われました。

アプリケーションの管理可能な状態管理機能を作成するために、機械エンジニアは必要ありません。 Reduxが提供しているAPIの一部を使用して、プログラムでこれを行います。

Reduxストアを作成するコードは次のようになります。

import {createStore} from "redux"; // reduxライブラリからのインポート
const store = createStore(); //不完全なソリューション-今のところ。

まず、ReduxからcreateStoreファクトリー関数をインポートします。次に、関数createStore()を呼び出してストアを作成します。

現在、createStore関数はいくつかの引数を取ります。 1つは減速機です。

したがって、より完全なストアの作成は、次のように表されます。createStore(reducer)

さて、そこに減速機がある理由を説明しましょう。

ストアとレデューサーの関係

銀行の例えに戻ります。

出金のために銀行に行くと、キャッシャーに会います。 WITHDRAW_MONEYの意図/アクションをキャッシャーに知らせた後、彼らは要求されたお金をあなたに渡すだけではありません。

番号。

キャッシャーはまず、あなたが求める引き出しの取引を実行するのに十分なお金が口座にあることを確認します。

あなたはどれだけ撤退したいのですか?

キャッシャーはまず、あなたが言うお金を持っていることを確認します。

Vaultは銀行にすべてのお金を保管しているため、コンピューターからは、すべてを見ることができます。

一言で言えば、キャッシャーとボールトは常に同期しています。素晴らしい仲間たち!

キャッシャーとボールトは同期しています!

Redux STORE(独自のVault)とRedux REDUCER(独自のキャッシャー)についても同じことが言えます。

StoreとReducerは素晴らしい仲間です。常に同期しています。

どうして?

REDUCERは常にSTOREと「対話」します。キャッシャーがVaultと同期しているように。

これは、Restorerを使用してストアの作成を呼び出す必要がある理由を説明しています。これは必須です。レデューサーは、createStore()に渡される唯一の必須引数です

レデューサーは、「createStore」に渡される必須の引数です

次のセクションでは、Reducerを簡単に見てから、REDUCERをcreateStoreファクトリー関数に渡すことでSTOREを作成します。

レデューサー

すぐに詳細を説明しますが、ここでは短くします。

リデューサーという言葉を聞いたとき、何が思い浮かびますか?

減らす?

うん、そう思った。

減らすように聞こえます。

Reduxの公式ドキュメントによると:

レデューサーはReduxで最も重要な概念です。
レデューサーはReduxで最も重要な概念です。より経験豊富な英語。ミドルウェアを支持して主張するかもしれません。

キャッシャーは非常に重要な人物ですね。

それで、Reducerとの取引は何ですか。それは何をするためのものか?

より技術的な用語では、減速機は還元機能とも呼ばれます。気付いていないかもしれませんが、Array.reduce()メソッドに精通している場合は、おそらく既に減速機を使用しています。

ここに簡単な復習があります。

以下のコードを検討してください。

JavaScript配列の値の合計を取得する一般的な方法です。

let arr = [1,2,3,4,5]
let sum = arr.reduce((x、y)=> x + y)
console.log(sum)// 15

内部では、arr.reduceに渡される関数はリデューサーと呼ばれます。

この例では、リデューサーはアキュムレーターとcurrentValueの2つの値を取ります。xはアキュムレーターで、yはcurrentValueです。

同様に、Redux Reducerは単なる機能です。 2つのパラメーターを受け取る関数。最初はアプリのSTATEで、もう1つはACTIONです。

なんてことだ!しかし、REDUCERに渡されたSTATEとACTIONはどこから来たのでしょうか?

Reduxを学んでいたとき、私はこの質問を数回自問しました。

まず、Array.reduce()の例をもう一度見てください。

let arr = [1,2,3,4,5]
let sum = arr.reduce((x、y)=> x + y)
console.log(sum)// 15

Array.reduceメソッドは、必要な引数xおよびyを関数引数reducerに渡す役割を果たします。ですから、議論は薄暗いからではありませんでした。

Reduxについても同じことが言えます。

Reduxレデューサーも特定のメソッドに渡されます。何だと思う?

どうぞ!

createStore(リデューサー)

createStoreファクトリー関数。すぐにわかるように、このプロセスにはもう少し関与します。

Array.reduce()と同様に、createStore()は引数をリデューサーに渡す役割を果たします。

技術的なことを怖がらない場合は、Reduxソースコード内のcreateStoreの実装の簡略版を以下に示します。

関数createStore(reducer){
    var state;
    var listeners = []

    関数getState(){
        状態を返す
    }
    
    function subscribe(listener){
        listeners.push(リスナー)
        return unsubscribe(){
            var index = listeners.indexOf(listener)
            listeners.splice(index、1)
        }
    }
    
    function dispatch(action){
        state = reducer(state、action)
        listeners.forEach(listener => listener())
    }

    ディスパッチ({})

    return {ディスパッチ、サブスクライブ、getState}
}

上記のコードを取得しなくても、自分をbeatめないでください。私が本当に指摘したいのは、ディスパッチ関数内です。

状態とアクションでリデューサーがどのように呼び出されるかに注意してください

以上のことから、Reduxストアを作成するための最も最小限のコードは次のとおりです。

import {createStore} from "redux";
const store = createStore(reducer); //これは、作成されたレデューサーを含むように更新されました。

リファクタリングプロセスに戻る

Reduxを使用するための「Hello World」Reactアプリケーションのリファクタリングに戻りましょう。

前のセクションであなたを失った場合は、もう一度そのセクションを読んでください。それが沈むことは間違いありません。

さて、ここで私たちが持っているすべてのコードは次のとおりです。

import React、{Component} from "react";
「./HelloWorld」からHelloWorldをインポートします。

 import {createStore} from "redux";
 const store = createStore(reducer);

 クラスAppはComponentを拡張します{
 render(){
   return 
 }
}

デフォルトのアプリをエクスポートします。

理にかなっていますか?

このコードに問題があることに気づいたかもしれません。行4を参照してください。

createStoreに渡されたリデューサー関数はまだ存在していません。

ここで1つ書く必要があります。減速機は単なる機能です、覚えていますか?

reducersという新しいディレクトリを作成し、そこにindex.jsファイルを作成します。基本的に、レデューサー関数はパスsrc / reducers / index.jsにあります。

最初に、このファイルの単純な関数をエクスポートします。

エクスポートのデフォルト()=> {
}

リデューサーは2つの引数を取ることを覚えておいてください-前に確立したように。現時点では、最初の引数STATEに関心があります。

これを関数に追加すると、次のようになります。

エクスポートのデフォルト(状態)=> {
}

悪くない。

減速機は常に何かを返します。最初のArray.reduce()reducerの例では、アキュムレーターと現在の値の合計を返しました。

Reduxレデューサーの場合、常にアプリケーションの新しい状態を返します。

説明させてください。

銀行に入って出金に成功すると、銀行の金庫に保管されている現在の金額は同じではなくなります。今、あなたが200ドルを引き出した場合、あなたは今200ドル不足です。アカウントの残高は200ドル減少しています。

繰り返しますが、キャッシャーとヴォールトは、あなたが現在持っている量について同期を保ちます。

キャッシャーと同じように、これがまさにレデューサーの仕組みです。

キャッシャーと同様に、レデューサーは常にアプリケーションの新しい状態を返します。何かが変わった場合に備えて。出金アクションが実行されたとしても、同じ銀行残高を発行したくありません。

後で状態を変更/更新する方法の内部について説明します。今のところ、盲目的な信頼で十分です。

さて、手元の問題に戻りましょう。

この時点では状態の変更/更新を心配していないため、同じ状態が渡されたときに新しい状態が返されるようにします。

レデューサー内でのこの表現は次のとおりです。

エクスポートのデフォルト(状態)=> {
状態を返す
}

アクションを実行せずに銀行に行っても、銀行の残高は同じままですよね?

まだACTIONを実行しておらず、それをレデューサーに渡していないので、同じ状態を返すだけです。

2番目のcreateStore引数

銀行のキャッシャーを訪れたときに、口座残高を尋ねると、彼らはそれを調べてあなたに伝えます。

いくら?

しかし、どのように?

銀行で最初に口座を作成したときは、ある程度の入金額で口座を作成したかどうかを決めました。

ええと、500ドルの初回デポジットで新しいアカウントが必要です

これをアカウントへの初回入金と呼びましょう。

Reduxに戻ります。

同様に、redux STORE(Vaultを保持する私たち自身のお金)を作成する場合、最初のデポジットでそれを行うオプションがあります。

Reduxの用語では、これはアプリのinitialStateと呼ばれます。

コードで考えると、initialStateはcreateStore関数呼び出しに渡される2番目の引数です。

const store = createStore(reducer、initialState);

金融行為を行う前に、銀行口座の残高をリクエストした場合、初回入金は常にお客様に返金されます。

その後、金銭的なアクションを実行すると、この初回デポジットも更新されます。

現在、Reduxでも同じことが言えます。

initialStateとして渡されるオブジェクトは、Vaultへの最初の入金のようなものです。アクションを実行して状態を更新しない限り、このinitialStateは常にアプリケーションの状態として返されます。

アプリケーションを更新して、初期状態で渡すようにします。

const initialState = {tech: "React"};
const store = createStore(reducer、initialState);

initialStateが単なるオブジェクトであり、リファクタリングを開始する前のReact Appのデフォルト状態とまったく同じであることに注意してください。

さて、ここに私たちが持っているすべてのコードがあります-レデューサーもアプリにインポートされています。

App.js

import React、{Component} from "react";
「./HelloWorld」からHelloWorldをインポートします。
「./reducers」からレデューサーをインポートします。
import {createStore} from "redux";

const initialState = {tech: "React"};
const store = createStore(reducer、initialState);

クラスAppはComponentを拡張します{
 render(){
   return 
 }
 }

デフォルトのアプリをエクスポートします。

reducers / index.js

デフォルト状態のエクスポート=> {
状態を返す
}

一緒にコーディングしていて、今すぐアプリを実行しようとすると、エラーが発生します。どうして?

に渡された技術の小道具を見てください。これは、this.state.techのままです。

には状態オブジェクトが添付されていないため、未定義になります。

それを修正しましょう。

解決策は非常に簡単です。ストアがアプリケーションの状態を管理するようになったため、これはアプリケーションSTATEobjectをストアから取得する必要があることを意味します。しかし、どのように?

createStore()でストアを作成すると、作成されたストアには3つの公開されたメソッドがあります。

これらの1つはgetState()です。

どの時点でも、作成されたストアでgetStateメソッドを呼び出すと、アプリケーションの現在の状態が返されます。

この場合、store.getState()はオブジェクト{tech: "React"}を返します。これは、STOREを作成したときにcreateStore()メソッドに渡した初期状態であるためです。

あなたは今、これらすべてがどのように一緒になっているかわかりますか?

したがって、以下に示すように、tech propはに渡されます。

App.js

import React、{Component} from "react";
「./HelloWorld」からHelloWorldをインポートします。
import {createStore} from "redux";

const initialState = {tech: "React"};
const store = createStore(reducer、initialState);

クラスAppはComponentを拡張します{
 render(){
   return 
 }
 }
「this.state」を「store.getState()」に置き換えます

Reducers / Reducer.js

デフォルト状態のエクスポート=> {
状態を返す
}

それだけです! Reduxの基本を学習し、Reduxを使用するための簡単なReactアプリのリファクタリングに成功しました。

Reactアプリケーションの状態がReduxによって管理されるようになりました。状態オブジェクトから取得する必要があるものはすべて、上記のようにストアから取得されます。

うまくいけば、このリファクタリングプロセス全体を理解したことでしょう。

より簡単な概要については、このGithub diffをご覧ください。

「Hello World」プロジェクトでは、いくつかのReduxの重要な概念をよく見てきました。それは非常に小さなプロジェクトですが、構築するためのまともな基盤を提供します!

可能性のある落とし穴

直前にまとめたHello Worldの例では、ストアから状態を取得するために考えられる解決策は次のようになります。

クラスAppはComponentを拡張します{
  状態= store.getState();
  render(){
    return ;
  }
}

どう思いますか?これは機能しますか?

念のため、次の2つの方法は、Reactコンポーネントの状態を初期化する正しい方法です。

(a)

クラスAppはComponentを拡張します{
 constructor(props){
   super(props);
   this.state = {}
  }
}

(b)

クラスAppはComponentを拡張します{
  状態= {}
}

そのため、質問への回答に戻ると、はい、解決策は問題なく機能します。

store.getState()はRedux STOREから現在の状態を取得します。

ただし、割り当てstate = store.getState()は、Reduxから取得した状態をコンポーネントの状態に割り当てます。

暗黙的に、などのrenderからのreturnステートメントが有効になります。

これは、store.getState()。techではなくthis.state.techを読み取ることに注意してください。

これは機能しますが、Reduxの理想的な哲学に反します。

アプリ内でthis.setState()を実行すると、Reduxの助けを借りずにアプリの状態が更新されます。

これはデフォルトのReactメカニズムであり、望んでいるものではありません。 Redux STOREによって管理される状態を単一の真実のソースにする必要があります。

store.getState()のように状態を取得する場合でも、状態の更新/変更(後で説明します)でも、setState()ではなくReduxで完全に管理する必要があります。

Reduxはアプリの状態を管理するので、必要なことは、必要なコンポーネントの小道具としてRedux STOREから状態をフィードすることだけです。

あなたが自問しそうなもう一つの大きな質問は、「Reduxが私のアプリの状態を管理するために、なぜこのストレスをすべて経験しなければならなかったのですか?」です。

Reducer、Store、createStoreなんとか、なんとか、何とか…

うん、わかった。

私もそう感じました。

ただし、銀行に行くだけでなく、自分のお金を引き出すための正当なプロセスに従わないという事実を考慮してください。それはあなたのお金ですが、適切なプロセスに従う必要があります。

Reduxについても同じことが言えます。

Reduxには、物事を行うための独自の「プロセス」があります。それがどのように機能するかを学ぶ必要があります。そして、あなたは悪いことをしていません!

結論とまとめ

この章は刺激的です。私たちは主に、今後のより興味深いもののためのまともな基盤を設定することに焦点を合わせました。

この章で学んだことは次のとおりです。

  • Reduxは、JavaScriptアプリの予測可能な状態コンテナーです。
  • ReduxのcreateStoreファクトリ関数は、Redux STOREを作成するために使用されます。
  • レデューサーは、createStore()に渡される唯一の必須引数です
  • レデューサーは単なる機能です。 2つのパラメーターを受け取る関数。最初はアプリのSTATEで、もう1つはACTIONです。
  • レデューサーは常にアプリケーションの新しい状態を返します。
  • アプリケーションの初期状態であるinitialStateは、createStore関数呼び出しに渡される2番目の引数です。
  • Store.getState()は、アプリケーションの現在の状態を返します。 Storeは有効なRedux STOREです。

演習の紹介

お願い、お願い、練習をスキップしないでください。特に、Reduxのスキルに自信がなく、このガイドを最大限に活用したい場合。

だから、あなたの開発者の帽子をつかんで、いくつかのコードを書いてください:)

また、任意の時点でソリューションに関するフィードバックを提供したい場合は、ハッシュタグ#UnderstandingReduxでツイートしてください。喜んでご覧になります。私はすべてのツイートにアクセスすることを約束していませんが、間違いなく試してみます!

演習を整理したら、次のセクションで会いましょう。

長いコンテンツを読む良い方法は、それをより短い消化可能なビットに分割することであることを忘れないでください。これらの演習は、あなたがまさにそうするのを助けます。少し時間を取り、練習問題を解決してから、読み直します。それは勉強するのに効果的な方法です。

これらの演習に対する私のソリューションをご覧になりたいですか?本のパッケージには、演習のソリューションが含まれています。 (無料の)電子ブック(PDFおよびEpub)をダウンロードすると、付随するコードを取得し、ソリューションを行使する方法の説明があります。

そこで、このセクションの演習を行います。

運動

(a)Reduxを使用するためのユーザーカードアプリのリファクタリング

書籍の付属のコードファイルには、Reactでのみ記述されたユーザーカードアプリがあります。アプリの状態は、Reactを介して管理されます。あなたのタスクは、状態をReduxのみによって管理される状態に移行することです。

演習:Reactで構築されたユーザーカードアプリ。 Reduxを使用するようにリファクタリングします。

第3章:アクションを使用した状態の更新について

Reduxの基本概念について説明したので、さらに興味深いことを始めます。

この章では、すべてのプロセスを詳細に説明しながら、別のプロジェクトを順を追って説明することで学習を続けます。

それでは、今回はどのプロジェクトが機能するのでしょうか?

私は完璧なものを持っています。

以下のモックアップを検討してください。

Hello worldアプリのデザインを更新しました。

ああ、前の例と同じように見えますが、いくつか変更があります。今回は、ユーザーのアクションを考慮します。ボタンのいずれかをクリックすると、下のGIFに示すようにアプリケーションの状態を更新します。

GIF!

これが前の例とどのように異なるかです。このシナリオでは、ユーザーはアプリケーションの状態に影響する特定のアクションを実行しています。前の例では、ユーザーのアクションを考慮せずにアプリの初期状態を表示するだけでした。

Reduxアクションとは何ですか?

あなたが銀行に足を踏み入れると、キャッシャーはあなたの行動、つまり銀行に入ろうとするあなたの意図を受け取ります。前の例では、WITHDRAWAL_MONEYでした。お金が銀行の金庫から出る唯一の方法は、あなたの行動や意図をキャッシャーに知らせることです。

現在、Redux Reducerについても同じことが言えます。

純粋なReactのsetState()とは異なり、Reduxアプリケーションの状態を更新する唯一の方法は、REDUCERに意図を知らせることです。

しかし、どのように?

アクションをディスパッチすることにより!

現実の世界では、実行したい正確なアクションを知っています。おそらくそれを伝票に書き留めてキャッシャーに渡すことができます。

これはReduxでもほぼ同じように機能します。唯一の課題は、Reduxアプリでアクションをどのように記述しますか?間違いなく、カウンターで話したり、伝票に書き留めたりすることではありません。

いいニュースがあります。

アクションは、プレーンなJavaScriptオブジェクトで正確に記述されます。これ以上何もない。

知っておくべきことは1つだけです。アクションにはtypeフィールドが必要です。このフィールドは、アクションの意図を説明します。

銀行の話で、銀行に対するあなたの行動を説明すると、次のようになります。

{
  タイプ: "withdraw_money"
}

それだけです

Reduxアクションは、プレーンオブジェクトとして記述されます。

上記のアクションをご覧ください。

タイプフィールドのみが、銀行で出金するために想定されるアクションを正確に記述していると思いますか?

うーん。そうは思いません引き出したい金額はどうですか?

多くの場合、アクションには完全な説明のために追加のデータが必要です。以下のアクションを検討してください。私は、これがよりよく説明された行動につながると主張します。

{
  タイプ:「withdraw_money」、
  金額:「$ 4000」
}

現在、アクションを説明する十分な情報があります。この例では、銀行口座番号など、アクションに含まれる可能性のあるその他の詳細はすべて無視します。

タイプフィールド以外のReduxアクションの構造は、ユーザー次第です。

ただし、一般的なアプローチは、次に示すように、タイプフィールドとペイロードフィールドを持つことです。

{
  タイプ:「」、
  ペイロード:{}
}

タイプフィールドはアクションを記述し、アクションを記述する他のすべての必要なデータ/情報はペイロードオブジェクトに入れられます。

例えば:

{
  タイプ:「withdraw_money」、
  ペイロード:{
     金額:「$ 4000」
  }
}

だから、ええ!それがアクションです。

レデューサーでのアクションへの応答の処理

アクションが何であるかを理解できたので、実際的な意味でどのように役立つかを確認することが重要です。

先ほど、減速機は2つの引数を取ると言いました。 1つの状態、もう1つのアクション。

シンプルなレデューサーは次のようになります。

関数reducer(state、action){
  //新しい状態を返します
}

アクションは、2番目のパラメーターとしてReducerに渡されます。ただし、関数自体では何もしていません。

レデューサーに渡されるアクションを処理するには、通常、レデューサー内で次のようにswitchステートメントを記述します。

関数レデューサー(状態、アクション){
switch(action.type){
ケース「withdraw_money」:
//何かをする
ブレーク;
ケース「deposit-money」:
//何かをする
ブレーク;
デフォルト:
状態を返す;
}
}

switch文が気に入らない人もいますが、基本的には単一のフィールドで使用可能な値のif / elseです。

上記のコードは、アクションタイプを切り替えて、渡されたアクションのタイプに基づいて何かを実行します。技術的には、新しい状態を返すには、do someビットが必要です。

さらに説明させてください。

特定のWebページに2つの仮想ボタン、ボタン#1とボタン#2があり、状態オブジェクトが次のようになっているとします。

{
isOpen:true、
isClicked:false、
  }

ボタン#1をクリックすると、isOpenフィールドを切り替えることができます。 Reactアプリのコンテキストでは、ソリューションは簡単です。ボタンがクリックされるとすぐに、これを行います:

this.setState({isOpen:!this.state.isOpen})

また、#2がクリックされたときにisClickedフィールドを更新するとします。繰り返しになりますが、解決策はシンプルで、次のようになります。

this.setState({isClicked:!this.state.isClicked})

良い。

Reduxアプリでは、setState()を使用してReduxが管理する状態オブジェクトを更新することはできません。

最初にアクションをディスパッチする必要があります。

アクションは次のとおりであると仮定します。

#1:

{
タイプ:「is_open」
}

#2:

{
タイプ:「is_clicked」
}

Reduxアプリでは、すべてのアクションがレデューサーを通過します。

それらのすべて。したがって、この例では、アクション#1とアクション#2の両方が同じ減速機を通過します。

この場合、レデューサーはそれぞれをどのように区別しますか?

ええ、あなたは正しいと思いました。

action.typeを切り替えることで、両方のアクションを簡単に処理できます。

ここに私が意味するものがあります:

関数レデューサー(状態、アクション){
switch(action.type){
ケース「is_open」:
戻り; //新しい状態を返します
ケース「is_clicked」:
戻り; //新しい状態を返します
デフォルト:
状態を返す;
}
}

これで、switchステートメントが役立つ理由がわかりました。すべてのアクションはリデューサーを通過します。したがって、各アクションタイプを個別に処理することが重要です。

次のセクションでは、以下のミニアプリを作成するタスクを続行します。

アプリケーション内のアクションを調べる

前に説明したように、アプリケーションの状態を更新する意図がある場合は常に、アクションをディスパッチする必要があります。

その意図がユーザーのクリック、タイムアウトイベント、またはAjaxリクエストによって開始されたとしても、ルールは同じままです。アクションをディスパッチする必要があります。

同じことがこのアプリケーションにも当てはまります。

アプリケーションの状態を更新するつもりなので、いずれかのボタンがクリックされるたびに、アクションをディスパッチする必要があります。

まず、アクションを説明しましょう。

それを試してみて、あなたがそれを得るかどうか確かめてください。

ここに私が思いついたものがあります:

Reactボタンの場合:

{
    タイプ:「SET_TECHNOLOGY」、
    テキスト:「React」
  }

React-Reduxボタンの場合:

{
     タイプ:「SET_TECHNOLOGY」、
     テキスト:「React-redux」
   }

そして最後に:

{
   タイプ:「SET_TECHNOLOGY」、
  テキスト:「エルム」
}

簡単ですね。

3つのアクションのタイプフィールドは同じであることに注意してください。これは、3つのボタンがすべて同じことを行うためです。彼らが銀行の顧客である場合、彼らはすべてお金を預けているでしょうが、金額は異なります。アクションのタイプはDEPOSIT_MONEYになりますが、金額フィールドが異なります。

また、アクションタイプはすべて大文字で書かれていることに気付くでしょう。それは意図的なものでした。必須ではありませんが、Reduxコミュニティではかなり人気のあるスタイルです。

どうすればアクションを思いついたのか理解できたと思います。

アクションクリエーターの紹介

上記で作成したアクションを見てください。いくつかのことを繰り返していることに気付くでしょう。

1つには、すべて同じタイプフィールドがあります。これらのアクションを複数の場所にディスパッチする必要がある場合、場所全体にそれらを複製する必要があります。それはあまり良くありません。特に、コードを乾いた状態に保つのは良い考えだからです。

これについて何かできますか?

承知しました!

Action Creators、ようこそ。

Reduxにはこれらすべての派手な名前がありますよね?レデューサー、アクション、そして今、アクション作成者:)

それらが何であるかを説明させてください。

Action Creatorは、アクションの作成を支援する単なる機能です。それで全部です。アクションオブジェクトを返す関数です。

特定の例では、次のように、テキストパラメーターを受け取り、アクションを返す関数を作成できます。

エクスポート関数setTechnology(テキスト){
  return {
     タイプ:「SET_TECHNOLOGY」、
     tech:テキスト
   }
}

これで、コードをいたるところに複製する必要がなくなりました。 setTechnologyアクションクリエーターにいつでも電話するだけで、アクションが返されます!

なんて便利な機能です。

ES6を使用すると、上で作成したアクションクリエーターを次のように簡略化できます。

const setTechnology = text =>({type: "SET_TECHNOLOGY"、text});

これで完了です。

すべてをまとめる

前のセクションで、より高度なHello Worldアプリを分離して構築するために必要なすべての重要なコンポーネントについて説明しました。

それでは、すべてをまとめてアプリを作成しましょう。興奮した?

まず、フォルダ構造について説明しましょう。

銀行に着くと、キャッシャーはおそらく自分のキュービクル/オフィスに座っています。また、Vaultは安全な部屋に安全に保管されます。正当な理由により、物事はそのようにもう少し整理されたように感じます。自分のスペースにいる全員。

Reduxについても同じことが言えます。

reduxアプリの主要なアクターを独自のフォルダー/ディレクトリ内に配置することは一般的な方法です。

アクターとは、つまり、レデューサー、アクション、およびストアです。

アプリディレクトリ内に3つの異なるフォルダーを作成し、これらのアクターにそれぞれ名前を付けるのが一般的です。

これは必須ではありません。必然的に、プロジェクトをどのように構成するかを決定します。ただし、大きなアプリケーションの場合、これはかなり適切な方法です。

次に、現在のアプリディレクトリをリファクタリングします。いくつかの新しいディレクトリ/フォルダを作成します。 1つはレデューサー、もう1つはストア、最後のアクションはアクションと呼ばれます

これで、次のようなコンポーネント構造が得られます。

各フォルダーで、index.jsファイルを作成します。これは、各Reduxアクター(リデューサー、ストア、およびアクション)のエントリポイントになります。私は彼らを映画俳優のような俳優と呼んでいます。これらはReduxシステムの主要なコンポーネントです。

次に、この新しいディレクトリ構造を使用するために、第2章の最初のReduxアプリケーションの以前のアプリをリファクタリングします。

store / index.js

import {createStore} from "redux";
「../reducers」からリデューサーをインポートします。

const initialState = {tech: "React"};
export const store = createStore(reducer、initialState);

これは以前と同じです。唯一の違いは、ストアが独自のindex.jsファイルで作成されるようになったことです。たとえば、異なるReduxアクター用に個別のキュービクル/オフィスがあります。

これで、アプリ内のどこかにストアが必要な場合、「./ store」からのストアのインポートのように、ストアを安全にインポートできます。

そうは言っても、この特定の例のApp.jsファイルは前者とは少し異なります。

App.js

import React、{Component} from "react";
「./HelloWorld」からHelloWorldをインポートします。
"./ButtonGroup"からButtonGroupをインポートします。
import "store} from" ./store ";

クラスAppはComponentを拡張します{
  render(){
    return [
      、
      
    ];
  }
}

デフォルトのアプリをエクスポートします。

何が違うの?

4行目では、ストアは自身の「キュービクル」からインポートされます。また、一連のテクノロジーを取り入れてボタンを吐き出すコンポーネントがあります。 ButtonGroupコンポーネントは、「Hello World」テキストの下にある3つのボタンのレンダリングを処理します。

また、Appコンポーネントが配列を返すことに気付くかもしれません。これはReact 16の特典です。 React 16では、div内の隣接するJSX要素をラップする必要はありません。必要に応じて配列を使用できますが、配列内の各要素にキー支柱を渡します。

App.jsコンポーネントについては以上です。

ButtonGroupコンポーネントの実装は非常に簡単です。ここにあります:

ButtonGroup.js

ReactからReactをインポートします。

const ButtonGroup =({technology})=>(
  
    {technologies.map((tech、i)=>(       <ボタン         data-tech = {tech}         key = {`btn-$ {i}`}         className = "hello-btn"       >         {tech}            ))}    ); デフォルトのButtonGroupをエクスポートします。

ButtonGroupは、テクノロジーで表される一連のテクノロジーを取り込むステートレスコンポーネントです。

mapを使用してこの配列をループし、配列内の技術ごとに