Redux-thunk中间件
2019-10-08 本文已影响0人
参商_70a0
redux thunk中间件其实是处在action和store中间。
redux thunk有助于自动化测试。
redux thunk 可以实现将AJAX请求,放在action中。
优点在于如果总是把AJAX放在生命周期中的话,组件会比较臃肿,放在action中比较好。
以前action必须是一个对象,现在可以是一个函数了,dispatch也可以将发出去。
//在actionCreator.js中这里返回的是对象
export const getInputChangeAction=(value)=>{
return {
type:CHANGE_INPUT_VALUE,
value:value
}
}
//在actionCreator.js中这里返回的是函数,这个函数可以接收到store的dispatch方法
export const getHomeInfo=()=>{
return (dispatch)=>{
axios.get('/api/home.json').then((res)=>{
const result=res.data.data;
dispatch(changeHomeData(result));
})
}
}
这个时候在componentDidMount中dispatch这个action
就可以实现请求了。
image.png
中间件其实就是对dispatch方法的一个升级
如果dispatch接收到的是一个对象,那么直接交给store
如果dispatch接收到的是一个函数,那么函数可以先执行,再调用其他传递其他action