検索

React で Redux を使用する詳細な例

Jun 29, 2017 am 09:58 AM
reactredux使用

これは、Webpack+React シリーズの設定プロセス記録の 6 回目の記事です。その他の内容については、以下を参照してください:

  • 最初の記事: webpack、babel、react、antdesignを使用したシングルページアプリケーション開発環境の構成

  • 2番目の記事: リアクトルーターを使用してシングルページを実装するアプリケーションルーティング

  • 3 番目の記事 記事: シングルページ開発環境の最適化: Webpack と React のランタイムパッケージングとホットアップデート

  • その 4: React は Webpack と連携してコード分割と非同期読み込みを実装します

  • パート 5: Webpack 開発環境と運用環境を分離する 構成

  • パート 6: React で Redux を使用する

この記事の主な内容は次のとおりです: 1. 以前の問題を修正します
2. Redux をフレームワークに導入します。 、例を使って簡単に紹介 redux の使い方
3. その他の redux 補助ライブラリ。

残りの問題を修正します

  1. webpack.prod.config.js にパス ライブラリへの参照が欠落しており、npm run build:prod を実行するとビルドが失敗します。ファイルの先頭にnode.jsのパスライブラリを導入するだけです。 npm run build:prod的时候失败。在文件开始的地方引入node.js的path库就可以了。

  2. package.json里面定义了一个build:dev的脚本,这个脚本其实有点多余,不过有时候需要打包测试版本的文件,所以还是需要存在。主要有个问题是webpack.dev.config.js中output节点下错误定义了path的值为根目录'/',这在使用npm start命令启动运行时打包的时候看不出问题,但是在使用npm run build:dev时会出现无法写文件到根目录的权限错误。只要把path的值改掉就可以。path: config.publicPath改成path: config.staticPath,publicPath: config.publicPath

  3. package.json は build:dev スクリプトを定義します。このスクリプトは実際には少し冗長ですが、テスト バージョン ファイルをパッケージ化する必要がある場合があるため、依然として存在する必要があります。主な問題は、webpack.dev.config.js の出力ノードの下のパスの値がルート ディレクトリ '/' として誤って定義されていることです。この値は、npm start コマンドを使用して確認できないことです。ランタイムパッケージを開始します。問題がありますが、npm run build:dev を使用すると、ファイルをルートディレクトリに書き込めないというパーミッションエラーが表示されます。パスの値を変更するだけです。 path: config.publicPath は、path: config.staticPath,publicPath: config.publicPath に変更されます。

css-loaderとless-loaderでエクスポートしたスタイルクラス名が長すぎるので、localIdentNameのパス部分を削除した方が良いでしょう。

redux

reduxをインストールします
依存関係をインストールするコマンドは次のとおりです:

npm install --save redux react-redux redux-thunk  
npm install --save-dev redux-logger
redux 言うまでもなく、ローカルデータベースとして使用します。react-reduxはデータサブスクリプションの完了に役立ちます、redux-thunk redux-logger は redux のログミドルウェアです。

redux とコード レイアウトについて

紹介を始める前に、redux の使用について私自身の意見をいくつか述べたいと思います。

上で述べたように、私は redux をローカル データベースとして扱うため、カプセル化する傾向があります。 redux は mvc に似ています。 モデルの役割は独立した層です。これは別の観点とは異なります。会社内の私のプロジェクトでは、各ページを独立したモジュールとして扱うことを好み、各モジュールは独自のリデューサーとアクションを維持します。

私のアプローチは、レデューサーの再利用をより効果的に実現できます。私にとってより重要な利点は、改訂が一元化されていることです。小規模なプロジェクトや、単独でプロジェクトを開発するシナリオに適しています。

結局のところ、当社のプロジェクトアプローチは、複数人による共同開発に適しています。結局のところ、全員が自分のコードを保守するだけで済みます。企業プロジェクトのこの方法には、私が受け入れるのが難しいいくつかの問題があります:

1 つ目の問題は、モジュールが増えるほど、リデューサーとアクションの定義が増えることです。多くの場合、これらのコードは似ています。
より重要なことは 2 番目の質問です。ストア内のモジュール データのストレージはルート ステートの直下に配置されます。ルート ステートのデータ形式は次のようになります: 🎜🎜
{
    aModuleData:{...},
    bModuleData:{...},
    cModuleData:{...},
    dModuleData:{...},
    ...
}
🎜

プロジェクトの本来の目的は、各モジュールを独立させておくことですが、実際の使用では、aModule が aModuleData と bModuleData を同時に使用する可能性が非常に高くなります。これは、独自のコードを保守するという全員の本来の意図に反しており、redux の真の機能を十分に発揮できません。

もう 1 つの小さな問題は、通常、リデューサーの構成がアプリケーションのデータ状態のスタイルに影響を与えることです。リデューサーが各モジュールに配布された後、特にモジュールが動的にロードされるとなおさらです。ただし、ロガーなどのツールを使用すると解決できます。

これに関する論争については、Redux チュートリアルで言及されています。

redux を使用する

コードがどのようにレイアウトされているかに関係なく、redux を使用する方法は主に 3 つのステップです: ストアの作成、アクションの作成、リデューサーの作成。その後に、ビジネスまたはコンポーネントに関連するデータの処理と表示が続きます。

まず私のアプローチのコードレイアウトを見てください:

React で Redux を使用する詳細な例

ストアを作成するコードはmodel/index.jsに集中しており、アクションはmodel/actions/.jsとmodel/reducerに書かれています。 /.js をそれぞれ作成し、モジュールに応じて関数とリデューサー関数を DIY できます。

model/index.js のコードは次のとおりです:

React で Redux を使用する詳細な例

model/actions/index.js のコードは次のとおりです:

React で Redux を使用する詳細な例

ここでは、login という名前の非同期 actionCreator と 3 つの通常の actionCreator が定義されています。 。

actionCreator がコンポーネントによって呼び出された後、アクションがストアに送信され、reducer によって処理されます。コードは次のとおりです。

これで3つのステップは完了です。上記のコードは、ログイン アクションを単純にシミュレートします。ログインページに使用されるデータはloginPageDataに格納され、ログイン後に取得される現在のログインユーザーデータはエンティティデータEntityに格納されます。

React で Redux を使用する詳細な例次のステップはreduxとreactを接続することです。つまり、reduxストア内のデータをreactコンポーネントに転送して使用します。

最初のステップは、react にデータサポートを提供するために、react する Redux ストアをマウントすることです。最も簡単な方法は、アプリケーションのルート コンポーネント (私の場合は BasicExample.js) を見つけて、そのレンダリング関数の最外層に Provider タグを追加することです。コード スニペットは次のとおりです。

赤い線は変更点を描き、model/index.js からストア オブジェクトをエクスポートし、react-redux によって提供される Provider タグを介してそれを React にマウントし、データ サポートを提供します。反応する。

React で Redux を使用する詳細な例最後の赤い線を見てください。このテスト サンプル ReduxDemo を Home コンポーネントに追加しました。そのコードは次のとおりです:

このコードの焦点は接続関数です。この機能は、react-redux によっても提供されます。これを使用して通常の表示コンポーネント (ここでは ReduxDemo - データの表示のみを担当します) をラップし、コンテナー コンポーネントを返します。 connect 関数は、最初のパラメーターを使用して、表示コンポーネントがストアからのデータをサブスクライブできるようにします。2 番目のパラメーターを使用すると、表示コンポーネントがデフォルトでさまざまなアクションをディスパッチできるようになります。

React で Redux を使用する詳細な例この例では、ReduxDemo がマウントされた後、ログイン インターフェイスを呼び出してログインをシミュレートします。返された結果はストアに詰め込まれます (データ形式は、以前に作成されたリデューサーの構成によって決まります)。このページには、ストア内のデータに基づいたコンテンツが表示されます。ログインで発行するリモートリクエストは偽物なので、ここでは必ず失敗するので失敗内容が表示されます。

これで redux の使い方の紹介は終わりです。

redux 補助ライブラリ

実際、上記のコードで 2 つの補助ライブラリについてこっそり言及しましたが、これらはここで推奨したい 2 つのライブラリでもあります:

開発ツール redux-devtools: 他のさまざまなライブラリと組み合わせたもの視覚的なデバッグ インターフェイスを実装できます。

  1. データ正規化ツールnormalizr: データを正規化して整理します。 3 つのプロジェクトを経験した後、このライブラリを使用することを強くお勧めします。これにより、アプリケーションのデータ構成が明確になり、冗長データが削減され、データ更新によるパフォーマンスへの影響が軽減されます。

  2. 今回はここでは紹介しませんので、興味のある方はgithubのドキュメントをご覧ください。

以上がReact で Redux を使用する詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
舞台裏:JavaScriptをパワーする言語は何ですか?舞台裏:JavaScriptをパワーする言語は何ですか?Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1)解析段階で抽象的構文ツリー(AST)を生成します。 2)ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3)実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来:傾向と予測PythonとJavaScriptの未来:傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript:開発環境とツールPython vs. JavaScript:開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか?証拠を調べるJavaScriptはCで書かれていますか?証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1)C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2)V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3)JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません