Reduxを始めましょう：例で学ぶ

シリーズのこの2番目の投稿では、Reduxの理解を強化し、すでに知っていることに加えて構築します。まず、基本的なカウンターよりも複雑な現実的なReduxアプリケーション（連絡先リスト）を作成することから始めます。これにより、以前のチュートリアルで紹介した単一のストアと複数の還元剤の概念の理解を強化するのに役立ちます。その後、Reduxの状態をReactアプリケーションでバインドすることと、プロジェクトをゼロから作成する際に考慮すべきベストプラクティスでバインドすることについてお話します。

ただし、最初の投稿を読んでいない場合は問題ありません。Reduxの基本を知っている限り、フォローできるはずです。チュートリアルのコードはリポジトリで利用でき、それを出発点として使用できます。

Reduxを使用して連絡先リストを作成します

次の機能を備えた基本的な連絡先リストを作成します。

• すべての連絡先を表示します
• 連絡先を検索します
• サーバーからすべての連絡先を取得します
• 新しい連絡先を追加します
• 新しい連絡先データをサーバーに押し込みます

これが私たちのアプリケーションがどのようになるかです：

すべてを1つのストレッチでカバーするのは難しいです。したがって、この投稿では、新しい連絡先を追加し、新しく追加された連絡先を表示することのRedux部分だけに焦点を当てます。 Reduxの観点からは、状態を初期化し、ストアの作成、還元剤とアクションなどを追加します。

次のチュートリアルでは、ReactのフロントエンドからReactとReduxおよびDispatch Reduxアクションを接続する方法を学びます。最後の部分では、Reduxを使用してAPI呼び出しの作成に焦点を移します。これには、サーバーから連絡先を取得し、新しい連絡先を追加しながらサーバーリクエストを作成することが含まれます。それとは別に、既存のすべての連絡先を検索できる検索バー機能も作成します。

状態ツリーのスケッチを作成します

GitHubリポジトリからReact-Reduxデモアプリケーションをダウンロードできます。リポジトリをクローンし、 V1ブランチを出発点として使用します。 V1ブランチは、Create-React-Appテンプレートに非常に似ています。唯一の違いは、Reduxを整理するためにいくつかの空のディレクトリを追加したことです。これがディレクトリ構造です。

 。<br> package.json<br> public<br> ├├。Readme.md<br> ├├）rc<br> │├│。ですか？アクション<br>│├ク。app.js<br> │├├。。components<br> │├├。-容器<br>│├│ク。index.js<br> │├│。-還元剤<br>│└。。<br> └··ックスロック<br>

または、新しいプロジェクトをゼロから作成することもできます。いずれにせよ、開始する前に、基本的な反応ボイラープレートとreduxを設置する必要があります。

最初に州の木の大まかなスケッチを持っていることをお勧めします。私の意見では、これにより、長期的には多くの時間を節約できます。これが、可能な状態ツリーの大まかなスケッチです。

 const InitialState = {<br> 連絡先：{<br> 連絡先：[]、<br> newContact：{<br> 名前： ''、<br> 姓： ''、<br> メール： ''、<br> 住所： ''、<br> 電話： ''<br> }、<br> ui：{<br> //ここにあるすべてのUI関連状態。例：モーダルを非表示/表示、<br> //チェックボックスなどを切り替えます。<br> }<br> }<br> }<br><br>

私たちのストアには、複数の還元剤を作成し、それらを単一の還元機能に結合できる2つのプロパティの2つのプロパティが必要です。 CombinerEducers機能は読みやすさを向上させます。そのため、Readerを2つに分割します。これは、Reactアプリケーション内のコンポーネントレベルの状態を管理するためのユーザーフックです。

同じ精神で、Reduxはいくつかの異なるフックを導入して、最小限のコードを作成しながら、機能コンポーネント内で通常のタスク（アクションの派遣、状態を取得するなど）を実行できるようにしました。これらのフックは、最初にReact Redux 7.1に追加されました。たとえば、アクションを派遣して状態ツリーを取得するために、Reduxは次のフックを提供します。

• USESELECTOR：ステートツリーや統計の枝さえ入手してください

これで、これらのフックを使用すると、代わりに上のコードをリファクタリングできます。

 //ここに他の輸入品<br><br>// reduxフックをインポートします<br>Import {sudeSpatch、useSelector} from 'race-redux'<br><br> //フックからディスパッチ関数を返します<br>const dispatch = usedispatch（）<br><br> // getStore（）を呼び出して、ストアオブジェクトを作成します<br>const store = getStore（）;<br><br> // useSelectorを使用して状態ツリーを取得します<br>const state = useSelector（state => state）<br><br> //州のUIブランチを取得します<br>const ui = useSelector（state => state.ui）<br><br> / * returns isContactFormhiddenはfalse */<br> Dispatch（togglecontactform（））;<br> / * returns isContactFormhiddenはfalse */<br> Dispatch（togglecontactform（））;<br> / * contacts.newContactオブジェクトの状態を更新 */<br>ディスパッチ（handleInputChange（ 'email'、 'manjunath@example.com'））<br><br> unsubscribe（）;<br>

すべてが正しく機能している場合は、開発者コンソールでこれを確認する必要があります。

それでおしまい！開発者コンソールでは、Reduxストアが記録されていることがわかります。そのため、各アクションの後にどのように変化するかがわかります。

まとめ

素晴らしい連絡先リストアプリケーションのために、Bare-Bones Reduxアプリケーションを作成しました。リデューサー、アプリ構造をクリーンにするためのレディューサーの分割、ストアを変えるためのアクションの書き込みについて学びました。

投稿の終わりに向かって、 store.subscribe()メソッドを使用してストアを購読しました。技術的には、これはReduxでReactを使用する場合に物事を成し遂げる最良の方法ではありません。 ReactフロントエンドをReduxと接続するためのより最適化された方法があります。次のチュートリアルで説明します。

以上がReduxを始めましょう：例で学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。