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

上一篇下一篇

猜你喜欢

热点阅读