これは、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 補助ライブラリ。
残りの問題を修正します
webpack.prod.config.js にパス ライブラリへの参照が欠落しており、
npm run build:prod
を実行するとビルドが失敗します。ファイルの先頭にnode.jsのパスライブラリを導入するだけです。npm run build:prod
的时候失败。在文件开始的地方引入node.js的path库就可以了。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
- package.json は build:dev スクリプトを定義します。このスクリプトは実際には少し冗長ですが、テスト バージョン ファイルをパッケージ化する必要がある場合があるため、依然として存在する必要があります。主な問題は、webpack.dev.config.js の出力ノードの下のパスの値がルート ディレクトリ '/' として誤って定義されていることです。この値は、
npm start
コマンドを使用して確認できないことです。ランタイムパッケージを開始します。問題がありますが、npm run build:dev
を使用すると、ファイルをルートディレクトリに書き込めないというパーミッションエラーが表示されます。パスの値を変更するだけです。path: config.publicPath
は、path: config.staticPath,publicPath: config.publicPath
に変更されます。
npm install --save redux react-redux redux-thunk npm install --save-dev redux-loggerredux 言うまでもなく、ローカルデータベースとして使用します。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 つのステップです: ストアの作成、アクションの作成、リデューサーの作成。その後に、ビジネスまたはコンポーネントに関連するデータの処理と表示が続きます。
まず私のアプローチのコードレイアウトを見てください:
ストアを作成するコードはmodel/index.jsに集中しており、アクションはmodel/actions/.jsとmodel/reducerに書かれています。 /.js をそれぞれ作成し、モジュールに応じて関数とリデューサー関数を DIY できます。
model/index.js のコードは次のとおりです:
model/actions/index.js のコードは次のとおりです:
ここでは、login という名前の非同期 actionCreator と 3 つの通常の actionCreator が定義されています。 。
actionCreator がコンポーネントによって呼び出された後、アクションがストアに送信され、reducer によって処理されます。コードは次のとおりです。
これで3つのステップは完了です。上記のコードは、ログイン アクションを単純にシミュレートします。ログインページに使用されるデータはloginPageDataに格納され、ログイン後に取得される現在のログインユーザーデータはエンティティデータEntityに格納されます。次のステップはreduxとreactを接続することです。つまり、reduxストア内のデータをreactコンポーネントに転送して使用します。
最初のステップは、react にデータサポートを提供するために、react する Redux ストアをマウントすることです。最も簡単な方法は、アプリケーションのルート コンポーネント (私の場合は BasicExample.js) を見つけて、そのレンダリング関数の最外層に Provider タグを追加することです。コード スニペットは次のとおりです。
赤い線は変更点を描き、model/index.js からストア オブジェクトをエクスポートし、react-redux によって提供される Provider タグを介してそれを React にマウントし、データ サポートを提供します。反応する。最後の赤い線を見てください。このテスト サンプル ReduxDemo を Home コンポーネントに追加しました。そのコードは次のとおりです:
この例では、ReduxDemo がマウントされた後、ログイン インターフェイスを呼び出してログインをシミュレートします。返された結果はストアに詰め込まれます (データ形式は、以前に作成されたリデューサーの構成によって決まります)。このページには、ストア内のデータに基づいたコンテンツが表示されます。ログインで発行するリモートリクエストは偽物なので、ここでは必ず失敗するので失敗内容が表示されます。
これで redux の使い方の紹介は終わりです。
redux 補助ライブラリ
実際、上記のコードで 2 つの補助ライブラリについてこっそり言及しましたが、これらはここで推奨したい 2 つのライブラリでもあります:
開発ツール redux-devtools: 他のさまざまなライブラリと組み合わせたもの視覚的なデバッグ インターフェイスを実装できます。
データ正規化ツールnormalizr: データを正規化して整理します。 3 つのプロジェクトを経験した後、このライブラリを使用することを強くお勧めします。これにより、アプリケーションのデータ構成が明確になり、冗長データが削減され、データ更新によるパフォーマンスへの影響が軽減されます。
今回はここでは紹介しませんので、興味のある方はgithubのドキュメントをご覧ください。
以上がReact で Redux を使用する詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

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

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

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

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

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

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

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


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

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

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ホットトピック









