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

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

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

関数 myFun(状態,アクション){
  // ...
}

//テストデータ let info = {
    title:"テストタイトル",
    クリック数:0
};

// パラメータ hull default (state = info, action) を通じてデータをエクスポートします =>{


    return state; // 返される値はテストデータです}

「./../redux/InfoReduce」からInfoReduceをインポートします。

「redux」から {createStore} をインポートします。
store = createStore(InfoReduce);

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

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

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

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

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

//テストデータ 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; // 返される値はテストデータです}