16.使用Redux-thunk中間鍵實(shí)現(xiàn)ajax數(shù)據(jù)請(qǐng)求19-05-28

到Github中搜redux-thunk,點(diǎn)開start最多的中間件的目錄,打開,有使用步驟,找到Installation先安裝

npm install redux-thunk

yarn add redux-thunk

在store的index中引入applyMiddleware方法狈孔,使我們可以使用中間件方法岭妖。
import { createStore , applyMiddleware} from 'redux';

再引入rudux模塊兒
import thunk from 'redux-thunk';
在createStore中添加applyMiddleware(thunk),即創(chuàng)建store的時(shí)候會(huì)使用thunk中間件箕速。

以下是同時(shí)使用redux-devtools的代碼改寫


redux-devtools-extension
高級(jí)商店設(shè)置中
1.2 Advanced store setup
復(fù)制代碼

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
);

以便使用中間件thunk,同時(shí)引用redux_devtools

+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

代碼改寫如下

import { createStore , applyMiddleware,compose} from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;
const enhancer = composeEnhancers(
  applyMiddleware(thunk),
);
const store = createStore(
  reducer,
  enhancer,
);
export default store;

4.當(dāng)使用了redux_thunk以后,action可以是一個(gè)函數(shù)了

export const getTodoList = () => {  
//使用了redux_thunk這里可以return一個(gè)函數(shù)了
return () => {
//函數(shù)里就可以做異步的操作
axios.get('/list.json').then((res)=>{
//此處使用Charles實(shí)現(xiàn)本地?cái)?shù)據(jù)帖世,(http://www.reibang.com/p/b73ca383a31b)
      const data = res.data;
     // console.log(data);
     // const action = initListAction(data);
     // dispatch(action);
   }
}

5.調(diào)用getTodoList這個(gè)函數(shù)
到TodoList.js中引入getTodoList函數(shù)

import {getInputChangeAction,getAddItemAction,getDeleteItemAction,getTodoList} from './store/actionCreators'

創(chuàng)建一個(gè)action
const action = getTodoList();//打印action,這里的action返回的是一個(gè)函數(shù)

componentDidMount() {
    const action = getTodoList();
    store.dispatch(action);//直接通過dispatch方法把a(bǔ)ction發(fā)給store沸枯,此時(shí)action里的函數(shù)會(huì)自動(dòng)執(zhí)行
    console.log(action);
  }

6.創(chuàng)建action改變store里的數(shù)據(jù)

export const initListAction = (data)=>({
  type:INIT_LIST_ACTION,
  data
});
export const getTodoList = () => {
  return (dispatch) => {//getTodoList 是函數(shù)可以接收到store的dispatch方法日矫。
    axios.get('/list.json').then((res)=>{
      const data = res.data;
      console.log(data);
      const action = initListAction(data);
      dispatch(action);//調(diào)用dispatch方法把a(bǔ)ction發(fā)給store
    })
  }
}

附加

什么是redux中間件


371559099163_.pic.jpg

中間件是action和store之間的 ,對(duì)dispatch方法的封裝或升級(jí)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末绑榴,一起剝皮案震驚了整個(gè)濱河市哪轿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌翔怎,老刑警劉巖窃诉,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異赤套,居然都是意外死亡飘痛,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門于毙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來敦冬,“玉大人,你說我怎么就攤上這事唯沮〔焙担” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵介蛉,是天一觀的道長萌庆。 經(jīng)常有香客問我,道長币旧,這世上最難降的妖魔是什么践险? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上巍虫,老公的妹妹穿的比我還像新娘彭则。我一直安慰自己,他們只是感情好占遥,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布俯抖。 她就那樣靜靜地躺著,像睡著了一般瓦胎。 火紅的嫁衣襯著肌膚如雪芬萍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天搔啊,我揣著相機(jī)與錄音柬祠,去河邊找鬼。 笑死负芋,一個(gè)胖子當(dāng)著我的面吹牛漫蛔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播示罗,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼惩猫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蚜点?” 一聲冷哼從身側(cè)響起轧房,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎绍绘,沒想到半個(gè)月后奶镶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡陪拘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年厂镇,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片左刽。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡捺信,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出欠痴,到底是詐尸還是另有隱情迄靠,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布喇辽,位于F島的核電站掌挚,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏菩咨。R本人自食惡果不足惜吠式,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一陡厘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧特占,春花似錦糙置、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至胖笛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間宜岛,已是汗流浹背长踊。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留萍倡,地道東北人身弊。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像列敲,于是被迫代替她去往敵國和親阱佛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 一、中間件的概念 為了理解中間件所意,讓我們站在框架作者的角度思考問題:如果要添加功能淮逊,你會(huì)在哪個(gè)環(huán)節(jié)添加? (1)R...
    丹蕾_7933閱讀 2,851評(píng)論 0 2
  • 寫在開頭 前置知識(shí)內(nèi)容扶踊,閉包泄鹏,高階函數(shù),函數(shù)式編程思想秧耗,redux核心概念备籽。 redux文檔:https://ww...
    前端開發(fā)愛好者閱讀 694評(píng)論 0 1
  • 看到這篇文章build an image gallery using redux saga,覺得寫的不錯(cuò)分井,長短也適...
    smartphp閱讀 6,166評(píng)論 1 29
  • 晚秋 最美好的時(shí)光 是最深情的懷念 當(dāng)我遠(yuǎn)離塵囂 依偎著 自己的心靈嘲笑 許多的欲望和激情 消退以后 我還能保持 ...
    龍青閱讀 171評(píng)論 0 2
  • 這是一場刻骨銘心的旅程车猬,我只能站立,不能前進(jìn)杂抽,不能后退诈唬。我只能注視,不能說話缩麸,不能妄動(dòng)铸磅。如果你愿意在我的琴上敲下一...
    韓風(fēng)奔跑閱讀 5,264評(píng)論 114 121