Reduxの - 利用WebPACKのビルドは、プロジェクト（3）と反応します

前述レビュー

前の記事では、必要がどのような設定を増やすに反応スタイルとイメージの導入に焦点を当て、この部分はで反応Reduxの導入について説明し

 

簡単な説明

核となるアイデアは、コントロールとの間の通信の問題を解決する統一された状態を維持することであるReduxの。

 

参照の追加

＃Reduxの

--save反応-ReduxのReduxのReduxの-サンクインストールNPM

＃Reduxのロガー

NPM --save-devののReduxのロガーをインストール

 

ファイルを追加します

ティムactionTypes.jsフォルダ定数

DIV_TOGGLE = 'DIV_TOGGLE' constの輸出

 

追加index.jsフォルダアクション

インポート* actionTypeが「として../constants/actionTypes'から
エクスポートCONST divToggle =（）=> （{ 
    タイプ：actionType.DIV_TOGGLE 
}）

 

追加index.jsフォルダ減速

インポート* actionTypeが「として../constants/actionTypes'から

CONSTストア =（状態= {isShow：偽 }、アクション）=> {
   スイッチ（action.type）{
     ケースactionType.DIV_TOGGLE：
       リターン{ 
        ...状態、
        isShow ：！state.isShow 
      } 
    デフォルト：
       リターン状態
  } 
} 


輸出デフォルトのストア

 

MyButton.jsを追加したフォルダのコンポーネント、MyImage.js

「が反応」からの輸入が反応します。
インポート{接続}「 - Reduxのを反応させます」。
インポート{divToggle} '../action/index' 

クラスにMyButtonはReact.Component {延び
  レンダリング（）{ 
    ましょう{divToggle} = この.props
     リターン（
       <ボタンのonClick = {divToggle}>切换图片显示</ボタン>
     ） ; 
  } 
} 

// 定义属性 
CONST mapStateToProps =状態=> {
   リターン{ 
  } 
} 

// 定义事件 
CONST mapDispatchToProps =（ディスパッチ、ownProps）=> {
   リターン{
     //订单提交 
    divToggle：（E）=> { 
      ディスパッチ（divToggle（））
    } 
  } 
} 


エクスポートデフォルト CONNECT（mapStateToProps、mapDispatchToProps）（MyButtonという）

「が反応」からの輸入が反応します。
インポート{接続}「 - Reduxのを反応させます」。

インポートIMG '../styles/images/bg.png' 

MYIMAGEがReact.Component {拡張するクラス
  レンダリング（）{ 
    ましょう{状態を} = この.props
     リターン（
        状態：<IMG SRC = {} IMGスタイル= {{ディスプレイ？.isShow '' 'なし'}} />
     ）; 
  } 
} 

// 定义属性 
CONST mapStateToProps =状態=> {
   リターン{ 
    状態
  } 
} 

エクスポートデフォルト（mapStateToProps）接続（MYIMAGE）

 

追加home.jsフォルダページ

「が反応」からの輸入が反応します。
以下からの輸入MYIMAGE '../components/MyImage' 
からの輸入にMyButton '../components/MyButton' 

クラスホームReact.Component {拡張
  レンダリング（）{ 
    リターン（
      の<div> 
        <MyButtonという> </ MyButtonという> 
        の<div> 
          <MYIMAGEを/> 
        </ DIV> 
      </ DIV>     ）; 
  } 
} 
輸出デフォルトのホーム

 

修正index.js

インポートは、「反応」からリアクト
「反応-DOM」からインポート{レンダリング} 
「Reduxの」からインポート{CREATESTORE、applyMiddleware} 
「反応-Reduxの」からインポート{プロバイダ} 
「Reduxのロガー」からインポート{createLogger} 
'からインポートサンクReduxの-サンク「
./reducers/index 'からインポート低減」


からインポートホーム ./pages/home」

CONSTミドルウェア = [サンク]。
もし（process.env.NODE_ENV == '生産'！）{ 
  middleware.push（createLogger（））; 
} 

CONST店舗 = CREATESTORE（
  減速、
  applyMiddleware（...ミドルウェア）
）

（レンダリング
   <
    <ホーム/> 
  のdocument.getElementById（ 'ルート' ）
）