ReduxとReactコンポーネントの非同期インタラクション

ReduxとReactコンポーネントの非同期インタラクション
http://blog.csdn.net/github_26672553/article/details/77716004前の編では簡単ないいね機能を完成しました.ページクリックイベント処理関数では、stateを変更するためのdispatch()メソッドを使用します.

        addClick(){
            //  state
            store.dispatch({
                type:"INFO_CLICK"
            })

            this.setState({ //  state
                infoData:store.getState()
            })
        }

しかし、ここでは非同期ではなく、同期コードです.dispatch後にstateを再取得しました.
1、実際の開発では、私たちはマルチコンポーネント開発に違いありません.それは、私たちが前にコンポーネントの中で直接storeを開発してはいけないことを意味します.コンポーネントのプロパティをstoreオブジェクトに渡すことができます.

<InfoDetail Store={store} />

2、これにより、コンポーネントの属性によって必要なデータを取得することができます.

    ：{this.props.Store.getState().title}
   ：{this.props.Store.getState().clicknum}

this.props.Store.dispatch(); //

3、私たちはthisを通過することができます.props.Storeはstore に存在するデータを取得するために使用され、私たちが関数constructorを構築してもstateを初期化する必要はありません.addClick()コードは以下のように簡略化されている.

        addClick(){
            this.props.Store.dispatch({
                type:"INFO_CLICK"
            })
        }

でも質問が来ました:stateを更新する必要があります.

    //         
    //         
    componentWillMount() {
        this.props.Store.subscribe(()=>{
            this.forceUpdate(); //        
        });
    }

storeのsubscribe()メソッドを呼び出し、このメソッドで更新します.
非同期って言ったでしょ
政府は私たちに中間部品redux-thunkを提供してくれた.インストール:

npm install redux-thunk

基本原理:ミドルウェアは私たちが書いたThunk関数をブロックし、非同期処理が完了した後、dispatch私たちの正常なActionを行い、stateの同期更新を継続します.
1、手を出そう

import {createStore, applyMiddleware} from "redux";
import thunk from "redux-thunk";

let store = createStore(InfoReduce,applyMiddleware(thunk));

その変化に注意する.
2、上記の変更(設定依存)があったら、thisを使用します.props.Store.dispatch()の場合はオブジェクトを入力する必要はありません.関数(Thunk関数)を入力できます.

this.props.Store.dispatch(setClickNum(101));

3、このThunk関数を重点的に書く
新しいactionsを作成します.js、私たちはこのような関数をこのファイルに書きます.

import axios from "axios";

export let setClickNum = function (id) { //    thunk  
    return function (dispatch) {
        axios
            .get("http://localhost/newsdetail.php","id="+id)
            .then((response)=>{
                //response.data.clicknum          
                console.log(response.data);
                dispatch(InfoAction.setClickNum(response.data.clicknum)); //        dispatch(action)
            })
    }
}

class InfoAction{
    static setClickNum(clicknum){
        return {
            type:"INFO_CLICK",
            num:clicknum
        }
    }
}

コードから、setClickNum()関数でaxiosプラグインを使用してサービス側からデータを取得しました.データの取得に成功した後、dispatch()を使用してactionを呼び出す.InfoActionクラスの方法でReducerとのインタラクション(すなわち前編のInfoReduce.js)が実現され,typeとnum 2個のデータが伝達されていることがわかる.
4、もちろん私たちのjsコードも変わります.

//    
let info = {
    title:"    ",
    clicknum:0
};

//          
export  default (state = info, action)=>{

    if (action.type == "INFO_CLICK"){
        // Object.assign()      
        return Object.assign({},state,{clicknum:action.num});
    }

    return state;
}

伝達されたデータは、actionパラメータによって取得される.