react.js フレームワーク Reduxhttps://github.com/reactjs/redux インストール: npm インストール redux react-redux #Reactをベースに、すでにインストール済み Redux リファレンスドキュメント: Reduxコアコンセプト: ストア単純に言えば、各コンポーネントの 減らす公式によると、redux の基本的な使用法は次のようになります。 「redux」から {createStore} をインポートします。 「./reducers」からtodoAppをインポートします。 store = createStore(todoApp); を作成します。 関数 myFun(状態,アクション){ // ... } もちろん、esmascript 2015 の矢印関数形式を使用して定義することもできます。 実践演習1.まずReduceを定義しましょう インフォリデュース: //テストデータ let info = { title:"テストタイトル", クリック数:0 }; // パラメータ hull default (state = info, action) を通じてデータをエクスポートします =>{ return state; // 返される値はテストデータです} 2. Reduceの準備ができました。Reduxを使い始めましょう 「./../redux/InfoReduce」からInfoReduceをインポートします。 「redux」から {createStore} をインポートします。 store = createStore(InfoReduce); 3. Redux の非常に重要なコンセプト // InfoDetailというコンポーネントを定義します。class InfoDetail extends React.Component{ //コンストラクタ(props) { スーパー(小道具); // 初期状態 this.state = { infoData:store.getState() //ストア オブジェクト メソッドを通じてデータを取得します}; } 与える(){ <div> を返す <h2>ニュースタイトル: {this.state.infoData.title}</h2> <span>クリック数: {this.state.infoData.clicknum}</span> <p><button>クリック音量を変更する</button></p> </div> } } この時点で、基本的に次のことを理解しました。Reducers は、新しい状態を生成して Store に渡す指定された関数であり、コンポーネントは Store を通じて状態を取得してコンポーネント データを更新します。 行動を理解する
実際、「アクション」という言葉から、それがビジネスを処理するために使用される操作であると推測できます。 前のコードでの エクスポート デフォルト (状態、アクション)=>{} 1.アクションは操作なので、コンポーネントのイベント処理関数で必要になります。 <button onClick={this.addClick.bind(this)}>クリック数を変更する</button> クリックイベント関数 2. addClick 関数で何が起こっているか見てみましょう。 追加クリック(){ //状態を変更する ストア.ディスパッチ({ タイプ:"INFO_CLICK" }) this.setState({ //状態を更新する 情報データ:store.getState() }) } 3. ニーズに応じて、アクションが処理する必要があるビジネスロジックはクリック数を増やすことです。 //テストデータ let info = { title:"テストタイトル", クリック数:0 }; // パラメータ hull default (state = info, action) を通じてデータをエクスポートします =>{ if (action.type == "INFO_CLICK"){ oldNum = state.clicknum とします。 古い数値++; // 新しいデータを返します return Object.assign({},state,{clicknum:oldNum}); } return state; // 返される値はテストデータです} Reducer 関数では、 この時点で、なぜ Redux がまだ面倒なのかと疑問に思うかもしれません。はい、Redux は一般的に複雑なビジネス ロジックを持つプロジェクトで使用されます。 react.jsフレームワークにおけるReduxの基本的なケースの詳細な説明に関するこの記事はこれで終わりです。 react.jsフレームワークにおけるReduxの基本的な内容の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。 今後とも123WORDPRESS.COMを応援してください。 以下もご興味があるかもしれません:
|
<<: Windows DNS サーバーに「ワームレベル」の脆弱性が露呈、17 年間存在
>>: Apache クロスドメイン リソース アクセス エラーの解決策
最も一般的な方法は、フィールドに主キーまたは一意のインデックスを設定することです。重複データを挿入す...
目次1. コンセプト1.1 定義1.2 デコレータファクトリー1.3 デコレータの組み合わせ1.4 ...
目次問題の説明Vueの動的コンポーネントとはアプリケーションシナリオの説明実装手順ステップ 1 (新...
ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...
ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.16-wi...
この記事では、MySQL 8.0.15の詳細なインストールと使用方法のチュートリアルを参考までに紹介...
序文:フロントエンド: jq+h5 で 9 グリッドのダイナミック効果を実現バックエンド: thin...
この記事では、コンパイルとインストールから設定ファイルの説明まで、Nginx について詳しく紹介しま...
現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...
マウスが画像の上を通過したときに画像のハイパーリンクを変更する方法:コードをコピーコードは次のとおり...
平日はニュースに注目して、テンセントをよく閲覧しています。しかし、コメントへの返信はほとんど見られま...
Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...
>1 データベースを起動するcmd コマンド ウィンドウで、「sqlplus」を直接入力して ...
1 / Webプロジェクトファイルをwebappsディレクトリに直接コピーするこれは最も一般的に使...
目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...