redux异步处理中间件

redux中的reducer是纯函数,即不会产生副作用。所以需要中间件来处理一些有副作用的事件,比如某些ajax请求。

比较具有代表性的俩个中间件:redux-thunk 与 redux-saga,前者主要是扩展了action,使得action从一个对象变成了一个函数,而后者则是将异步任务进行了统一处理。

1
2
3
4
5
6
7
8
// redux-thunk
dispatch((dispatch)=>{
dispatch({type:"FEICH_USERS_START"})
// do something async
axios.get('api/get/users')
.then(()=>{ dispatch({type:"FEICH_USERS_SUCCESS",payload:response.data})} )
.catch(()=>{ dispatch({type:"FEICH_USERS_FAILED",payload:response.data})} )
})

thunk: 无需传入参数,一切都准备就绪, 只需调用就会返回某些值的函数。

1
// redux-sagas

一个sagas包含三个部分,用以执行联合任务:

1、worker saga // 主要调用者,请求接口,返回数据等。

2、watcher saga

3、root saga // 调用sagas的唯一入口

# redux

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×