簡単に紹介して反応の再来の使用

1、なぜ再来？
データモデル（すなわち、データ）の表示（表示層）、小規模プロジェクトの開発に反応する、オブジェクトが他の単語の状態でページに格納された動的データに、組立状態で保存することができます。

しかし、大規模、複雑なプロジェクトの開発、単一ページのステータス（状態）の管理のために多くの、多くのがあるでしょう。管理状態が状態を変更することは非常に困難である変更すると、ページ内の変化を引き起こす可能性があり、

ページの変更も、この変化は非常に複雑であり、状態の変化を引き起こす可能性がありますので、我々がReduxの、状態（ステート）の多数を管理するReduxの使用を使用しているため、ストローク明確なビジネス機能を、達成することは困難です。

2、どのような状況の下でReduxの使用していませんか？

UI層は非常に簡単です（いくつかの動的データ・ページ）
サーバーとの相互作用の多くを必要としない、何も使用されていないのWebSocket
ビュー（ビューレベル）は、データの単一のソースです。

3.どのような状況下でReduxのを使用するには？

コンポーネントの状態が共有される必要があります
必要性の状態はどこに行くことができます
変更グローバル状態コンポーネント
コンポーネントは、別のコンポーネントの状態を変更します

4.原則Reduxのの実現は何ですか？

私たちは、国家の観点から、そのデータを知っている、または一から一です。reduxがちょうど、内部オブジェクトに格納されているすべての複雑な状態を引き抜きます

必要がビューデータ層を使用する場合、オブジェクトはモジュールを介して導入することができます。

5、Reduxのを使用する前に、我々はいくつかの基本的な概念Reduxのモジュールを理解する必要があります。

① ストアが、それは、データを格納する場所であるため、コア再来として見ることができる限り、データはデータも変更されたことを意味し、ここでビューレイヤを変更すると、

すべての操作はで動作し、データストアを中心に行われています。Reduxので提供する店、CREATESTORE生成機能の生成

// index.js 
// 倉庫店 
「Reduxの」からインポートCREATESTORE {} ; 
からインポート減速「./reducer」;
 // 減速結合、//ストアが生成された減速にさらされている記憶する機能が（動作であります機能データ） 
エクスポートデフォルト CREATESTORE（減速）。

② 統計ストアオブジェクトによっては、この時点でデータを取得することができgetStateを（）オブジェクトを生成し、すなわち、ストアに格納されたデータ。

//これは、シミュレーションモジュールストアによって取得されたデータ、カスタムコンポーネントモジュールToDo.jsある
インポートが反応、コンポーネントが「REACT」{から} 
インポート{ボタン、入力、一覧から}「antdを」;
 // 導入店舗 
インポート「../store/index」から店舗; 
エクスポートデフォルトのToDo {拡張するコンポーネントクラス
    コンストラクタ（小道具）{ 
        スーパー（小道具）; 
        この ; .STATE store.getState =（）// データストアで取得します

③ アクション状態の変化は、ビューの変更につながるが、ユーザーは、国家の手の届かないところにあるだけで表示する露出させることができます。だから、変化状態は、ビューの原因である必要があります。

アクションは、ユーザーがオブジェクトを運ぶでしょう（例えばクリックイベントのような）イベントをトリガーするオブジェクトである減速後述します

// 単純なアクションは、オブジェクト 
LETアクション= { 
         ：タイプ「TO_CNANGE_INPUT」、//が必要とされるアクションの名前を表す
         値：e.target.valueを
 }

//状態を変更する唯一の方法は、アクションを使用することです

//はパス減速した後、種類に応じて適切なデータ処理を行います

④store.dispatch（）は、問題のアクションを表示するための唯一の方法であります

inputChange =（E）=> { 
        作用せ = { 
            タイプ： 'TO_CNANGE_INPUT' 、
            値：e.target.value 
        } 
        // 分发アクション给ストア
        store.dispatch（アクション）。
    }

⑤ 減速 Storeはアクションを受け取った後、それが新しい状態に戻ります。

アクション減速アクションオブジェクトタイプの処理に伝達対応するデータを処理する機能であります

// initStateデータオブジェクトがデータストアに格納されている
エクスポートデフォルト（状態= InitState、アクション）=> { 
    にconsole.log（ '減速' ）;
     IF（action.type === 'TO_CNANGE_INPUT' ）{ 
        LETのOBJ = { 
            ...状態、
            inputValueで用：action.value 
        }; 
        にconsole.log（OBJ）; 
        戻りOBJを; 
    } 
}

ストアの状態がで変化するかどうかをリッスン⑥store.subscribe（）メソッド

エクスポートデフォルトクラスToDoのコンポーネント{拡張
    {コンストラクタ（小道具）を
        超（小道具）; 
        この .STATE store.getState =（）; // データストアの取得 
        store.subscribe（この .changeStateを）; // 加入者が行います物事、データ・モニタ・ストアの変更、現在の状態の更新情報 
    }

6.reduxワークフロー

-----部品は減速更新データが完了し、新しいデータが状態の表示に戻ります「------し、処理にアクションアクションクリエーターレデューサー・オブジェクトを送信」イベントをトリガーに反応----「表示後に更新することにより、状態ページを再レンダリングします。

7.例：私のGitHubに公開覚書を行うReduxのと反応して、ダウンロードして自分で実行することができます興味を持っています。

GitHubの住所：https://github.com/ZhuJingLe/reduxAnli

メッセージは私のソースコードを見つけることが気にすることはできません場合は^ _ ^

簡単に紹介して反応の再来の使用

おすすめ