React.js フレームワーク Redux 基本ケースの詳細な説明

React.js フレームワーク Redux 基本ケースの詳細な説明

react.js フレームワーク Redux

https://github.com/reactjs/redux

インストール:

npm インストール redux react-redux
#Reactをベースに、すでにインストール済み

Redux リファレンスドキュメント:
http://redux.js.org/

Reduxコアコンセプト: ストア

単純に言えば、各コンポーネントのStateや自分で定義した独立した状態を保存し、状態の読み取り、更新、監視などの統一された操作を実行するために使用されると理解できます。
http://redux.js.org/docs/basics/Store.html

這里寫圖片描述

減らす

公式によると、redux の基本的な使用法は次のようになります。

「redux」から {createStore} をインポートします。
「./reducers」からtodoAppをインポートします。
store = createStore(todoApp); を作成します。

createStore()に渡されるパラメータは関数 Function です。
Reduxのコンセプトは「Reduce」と呼ばれます。
Reduce の基本形式は次のとおりです。

関数 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 の非常に重要なコンセプトstoreが作成されました。コンポーネントでどのように使用するかを見てみましょう。

// 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>
        }
}

store.getState()を通じてデータを取得します。

這里寫圖片描述

この時点で、基本的に次のことを理解しました。Reducers は、新しい状態を生成して Store に渡す指定された関数であり、コンポーネントは Store を通じて状態を取得してコンポーネント データを更新します。

行動を理解する

actionに関する公式ドキュメント:
アクション

実際、「アクション」という言葉から、それがビジネスを処理するために使用される操作であると推測できます。

前のコードでのactionはどこにありますか?
Reducer 関数を定義する場合、2 番目のパラメーターは次のようになります。

エクスポート デフォルト (状態、アクション)=>{}

1.アクションは操作なので、コンポーネントのイベント処理関数で必要になります。

<button onClick={this.addClick.bind(this)}>クリック数を変更する</button>

クリックイベント関数addClickをボタンにバインドする

2. addClick 関数で何が起こっているか見てみましょう。

        追加クリック(){
            //状態を変更する
            ストア.ディスパッチ({
                タイプ:"INFO_CLICK"
            })

            this.setState({ //状態を更新する
                情報データ:store.getState()
            })
        }

this.setState()状態を更新するために使用されることを以前に学習しました。
store.dispatch()は Redux 内のものです。このメソッドは実際にactionをディスパッチします。
タイプ別に区別します。

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 関数では、 action.typeを使用してビジネス ロジックを判断し、処理します。

この時点で、なぜ Redux がまだ面倒なのかと疑問に思うかもしれません。はい、Redux は一般的に複雑なビジネス ロジックを持つプロジェクトで使用されます。

這里寫圖片描述

react.jsフレームワークにおけるReduxの基本的なケースの詳細な説明に関するこの記事はこれで終わりです。 react.jsフレームワークにおけるReduxの基本的な内容の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。 今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • Javascript の基礎: 演算子とフロー制御の詳細な説明
  • JavaScriptの基本構文とデータ型の詳細な説明
  • JavaScript 基礎シリーズ: 関数とメソッド
  • JSP EL式の基礎を詳しく説明します
  • Java の基礎 - FastJson の詳細な説明
  • Javascriptの基本を詳しく説明

<<:  Windows DNS サーバーに「ワームレベル」の脆弱性が露呈、17 年間存在

>>:  Apache クロスドメイン リソース アクセス エラーの解決策

推薦する

MySQL でデータの重複挿入を回避する 4 つの方法

最も一般的な方法は、フィールドに主キーまたは一意のインデックスを設定することです。重複データを挿入す...

TypeScript デコレータ定義

目次1. コンセプト1.1 定義1.2 デコレータファクトリー1.3 デコレータの組み合わせ1.4 ...

Vueは動的コンポーネントを使用してTAB切り替え効果を実現します

目次問題の説明Vueの動的コンポーネントとはアプリケーションシナリオの説明実装手順ステップ 1 (新...

クラウド CentOS で Docker リモート サービス リンクを有効にするための実装手順

ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...

MySQL 8.0 のタイムゾーン問題を解決する手順

ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.16-wi...

Windows での MySQL 8.0.15 の詳細なインストールと使用のチュートリアル

この記事では、MySQL 8.0.15の詳細なインストールと使用方法のチュートリアルを参考までに紹介...

jQuery+h5 で 9 マス抽選特殊効果を実現 (フロントエンドとバックエンドのコード)

序文:フロントエンド: jq+h5 で 9 グリッドのダイナミック効果を実現バックエンド: thin...

コンパイル、インストールから設定ファイルの説明まで、中国語でnginxの詳細な説明

この記事では、コンパイルとインストールから設定ファイルの説明まで、Nginx について詳しく紹介しま...

MySQL 学習ノート: データ エンジン

現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...

マウスが画像のハイパーリンク上を通過するときに画像のサイズ(幅、高さ)を変更する CSS

マウスが画像の上を通過したときに画像のハイパーリンクを変更する方法:コードをコピーコードは次のとおり...

IE 8/Chrome/Firefox と互換性のあるコメント返信ポップアップマスク効果実装アイデア

平日はニュースに注目して、テンセントをよく閲覧しています。しかし、コメントへの返信はほとんど見られま...

Linux シェル環境での Zabbix API の使用

Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...

Oracle の開閉の 4 つのモード

>1 データベースを起動するcmd コマンド ウィンドウで、「sqlplus」を直接入力して ...

Tomcat プロジェクトを展開する一般的な方法のいくつか [テスト済み]

1 / Webプロジェクトファイルをwebappsディレクトリに直接コピーするこれは最も一般的に使...

Reactのコンポーネント共同利用実装

目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...