redux-thunk 异步实现

1.redux同步简介

image.png

2.thunk异步实现思路

从action发出到store接受用reducer处理的过程中,没有可以插入异步的地方。
我们拦截action的发送,在dispatch的过程中,dispatch一个异步函数,异步函数执行完成后才dispatch一个同步的action,送达store.

  • dispatch发送的不再是纯js对象,而是一个函数
    !!!!在这个函数里面可以做各种异步任务!!!!!,做完了之后

  • 为了让store.dispatch能接受函数,需要使用中间件,即

const store = createStore(
    reducer,
    applyMiddleware(thunk)
)

中间件的具体原理

store.dispatch进行如下改造

function incrementAsync() {
    setTimeout(()=>{store.dispatch({type:'INCREMENT'})},1000 )
}
//应用层
 ReactDOM.render(
     store.dispatch(incrementAsync)}
    />,
    document.getElementById('root')

你可能感兴趣的:(redux-thunk 异步实现)