傳統(tǒng)的 flux
loader 的設(shè)置
在 flux 是各個(gè)組件單獨(dú)管理自己的 state杂彭，這意味著 loader 不必通過(guò) store 來(lái)設(shè)置申鱼，直接通過(guò)組件內(nèi)部的 state 變化即可。
組件未 render 的情況
先看仍然沒(méi)有發(fā)起數(shù)據(jù)請(qǐng)求座韵，組件還沒(méi)有 render 的情況余佃，
先將 state 中的
loading預(yù)設(shè)為true，頁(yè)面進(jìn)來(lái)之后融师，就是loading狀態(tài)，加載loader組件蚁吝，加載其他組件頁(yè)面第一次
render結(jié)束旱爆，在didmount中監(jiān)聽(tīng)store，之后發(fā)起action窘茁，帶上url怀伦，在action發(fā)起的時(shí)候，發(fā)現(xiàn)有url庙曙，就先去拉取數(shù)據(jù)空镜，異步請(qǐng)求結(jié)束后，更新store捌朴。store產(chǎn)生了變化吴攒，組件收到響應(yīng)，setState再考慮組件存在的情況砂蔽，此時(shí)已經(jīng) didmout 過(guò)洼怔，就不會(huì)再執(zhí)行了，點(diǎn)擊某個(gè)按鈕左驾，先通過(guò) setstate 顯示 loader镣隶，之后監(jiān)聽(tīng)、發(fā)送對(duì)應(yīng)的 action诡右，ui 發(fā)生改變安岂。
redux
redux 請(qǐng)求一個(gè)異步 api 時(shí)有兩個(gè)關(guān)鍵點(diǎn)，一個(gè)時(shí)間點(diǎn)是在你開(kāi)始執(zhí)行的時(shí)候帆吻，一個(gè)是接受到響應(yīng)時(shí)域那。
每當(dāng)遇到這種時(shí)刻，通巢轮螅可以改變應(yīng)用的 state次员。
發(fā)起一個(gè)正常的 action败许，reducer 會(huì)響應(yīng)這個(gè)action。
對(duì)于任何一個(gè) api 請(qǐng)求淑蔚，你需要發(fā)起三種不同的 action市殷。
一個(gè) action 通知 reducer 發(fā)起請(qǐng)求
reducers 可能會(huì)通過(guò)切換 state 中的 isFetching，ui 層通過(guò)會(huì)顯示一些類似 loader 的組件刹衫。
action 通知 reducer 請(qǐng)求成功
reducer 通過(guò)合并新的數(shù)據(jù)到 state 中醋寝，重設(shè) isFetching，UI 層可能會(huì)隱藏 loader 組件带迟，顯示下載的數(shù)據(jù)甥桂。
action 通知 reducer 請(qǐng)求失敗
reducer 重設(shè) isfetching，除此之外邮旷，一些 reducer 可能會(huì)存儲(chǔ)錯(cuò)誤信息供 UI 展示
