现在reudx中流行的两大中间件:saga,thunk首先说一下这两者的区别:
redux-thunk:
使用起来比较简单,在action中处理异步等副作用操作,此时的action是一个函数,以 dispatch,getState作为形参,函数体内的部分可以执行异步。通过redux-thunk来处理异步action可谓是多种多样,不利于维护
reudx-saga:
优点:
(1)集中处理了所有的异步操作,异步接口部分一目了然
(2)action是普通对象,这跟redux同步的action一模一样
(3)通过Effect,方便异步接口的测试
(4)通过worker 和watcher可以实现非阻塞异步调用,并且同时可以实现非阻塞
(5) 异步操作的流程是可以控制的,可以随时取消相应的异步操作。
缺点:太复杂,学习成本较高
下面介绍一下redux-saga 在 Redux 中如何使用:
下载reudx-saga:
npm install redux-saga
配置store:
import { createStore, combineReducers, applyMiddleware } from "redux"
import user from "./user";
// 引入中间件
import createSagaMiddleware from 'redux-saga'
import SagaCrea from './saga' //引入saga配置文件
const sagaMiddleCreate = createSagaMiddleware()
const Reducer = combineReducers({
user
})
// 创建store redux 中的中间件必须都在applyMiddleware上注册
const store = createStore(Reducer,applyMiddleware(sagaMiddleCreate))
// 运行saga
sagaMiddleCreate.run(SagaCrea)
export default store
创建saga文件:
这个的执行原理,当我们页面dispatch的时候,saga.js 会对里面的type 类型进行判断, 如果一样就证明是异步的,你可以去做一些操作,控制数据更新的时机。如果类型不同,那么就是同步action saga 就会放行。
import { takeEvery, put } from 'redux-saga/effects'
// put 它是saga提供给我们,用于发送指令给reducer来完成同步操作
// takeEvery 监听每一次dispatch发送的指令
// saga中间件 主saga,用于区别是否需要saga来处理异步操作,如果没有异步,则放行
function* mainSaga() {
yield watchSaga()
}
// 监听saga,监听type类型为异步操作名称的,此saga会通过主saga分配过来
function* watchSaga() {
// 如果type类型是adda 说明你进行的就是异步操作
yield takeEvery('adda', workSaga)
}
// 工作saga,监听saga得到任务后,把任务分配给工作saga
function* workSaga({ payload }) {
console.log(payload);
// payload 获得传递的数据 比如:{type:"adda",payload:{name:"参数"}
console.log("异步请求");
// 发送指令让reducer完成同步操作
yield put({ type: 'add', payload })
}
// 主saga要对外暴露出去
export default mainSaga