1.首先在TodoList中寫一個componentDidMount的生命周期函數(shù)
2.導(dǎo)入axios包
import axios from 'axios';
3.在componentDidMount的生命周期函數(shù)中寫出異步獲取數(shù)據(jù)的函數(shù)體
componentDidMount() {
axios.get('http://yapi.demo.qunar.com/mock/38353/app')
.then((res) =>{
alert(suscc);
})
.catch(alert(err));
}
4.接下來我們要改變store中的List的數(shù)據(jù)就必須定義action
5.我們在actionCreators中定義一個action隘冲,這個action要返回一個data的數(shù)據(jù)
import { CHANGE_INPUT_VALUE , ADD_TODO_ITEM , DELET_TODO_ITEM , INIT_LIST_ACTION } from './ActionTypes';
export const initListAction = (data) => ({
type : INIT_LIST_ACTION,
data
})
6.然后我們再ActioTypes中定義 INIT_LIST_ACTION這個常量
export const INIT_LIST_ACTION = 'init_list_action';
7.返回TodoList中寫異步請求數(shù)據(jù)函數(shù)
componentDidMount() {
axios.get('http://yapi.demo.qunar.com/mock/38353/app')
.then((res) =>{
const data = res.data;
const action = initListAction(data)
store.dispatch(action);
})
.catch(alert(err));
}
8.接下來在reducer來處理這個action
if(action.type === INIT_LIST_ACTION) {
const newState = JSON.parse(JSON.stringify(state));
newState.List = action.data;
return newState;
}
9.這樣store中的List數(shù)據(jù)就請求成功了
Redux 中發(fā)送異步請求獲取數(shù)據(jù)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辈双,“玉大人责掏,你說我怎么就攤上這事∨韧” “怎么了拷橘?”我有些...
- 文/不壞的土叔 我叫張陵,是天一觀的道長喜爷。 經(jīng)常有香客問我,道長萄唇,這世上最難降的妖魔是什么檩帐? 我笑而不...
- 正文 為了忘掉前任,我火速辦了婚禮另萤,結(jié)果婚禮上湃密,老公的妹妹穿的比我還像新娘。我一直安慰自己四敞,他們只是感情好泛源,可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著忿危,像睡著了一般达箍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上铺厨,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼腮鞍!你這毒婦竟也來了值骇?” 一聲冷哼從身側(cè)響起,我...
- 正文 年R本政府宣布颅和,位于F島的核電站傅事,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏峡扩。R本人自食惡果不足惜蹭越,卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望教届。 院中可真熱鬧响鹃,春花似錦、人聲如沸案训。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽强霎。三九已至忿项,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間城舞,已是汗流浹背倦卖。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 本文轉(zhuǎn)載自https://segmentfault.com/q/1010000013345427/a-102000...
- 概述步驟 a. 添加Volley庫,并封裝Volley為單例模式硫椰。 b. 使用OkHttp實現(xiàn) 基于 com.an...
- 前言2016年大四上學(xué)期實習(xí)繁调,參與爬蟲系統(tǒng)開發(fā),公司也遇到了如何獲取ajax靶草,vue蹄胰,angularJS渲染的網(wǎng)頁...
- 數(shù)據(jù)獲取 vue-resource vue-resource axios 單來說,vue-resource就像jQ...
- 接口測試的第一步就是需要發(fā)送接口請求,獲取到響應(yīng)數(shù)據(jù) 因為每個請求內(nèi)部實現(xiàn)都是一樣的妻往,不同的只是請求參數(shù)互艾、地址等信...