React -- redux-thunk的简单使用

为什么要使用redux-thunk, 因为我们想把像ajax请求的异步操作不放在声明周期函函数里面, 便于管理。

使用redux-thunk中间件，我们可以在action构造器中返回一个函数，而不是一个对象。

export const initStateAction = (data) => ({
    type: INIT_LIST_ACTION,
    data
})

export const getListAction = () => {
    return (dispatch) => {
        axios.get("/data.json").then((res) => {
            const data =res.data;
            const action = initStateAction(data);
            dispatch(action); 
       })
    }
}

我们注意到第二个action其实是返回了一个函数，我们函数内部进行了一次ajax请求，然后又发送了一次action,dispatch给redu

cer，进行相关处理。

    componentDidMount () {
        const action = getListAction();
        store.dispatch(action);  
    }

使用方法和其他普通的action一样。

middleware就是中间件。

应该很清楚了吧，使用redux-thunk让我们可以在action构造器返回一个函数，dispatch时会执行它，然后在函数内部会发送一个普通action给reducer。