1.什么是Redux-saga?
redux-saga和redux-thunk一样,是一个Redux中获取存储异步数据的中间件
redux-saga可以直接拦截dispatch派发的action, 从而实现在执行reducer之前执行一些其它操作
[小思考]：既然作用是一样的，为什么还需要react-saga呢？
因为react-thunk中dispatch方法既可以接收一个对象，又可以接收一个函数方法，但是在react官方中dispatch理应是接收一个对象的，为了解决这个有了react-saga，而且react-saga可以在reduce执行之前拦截action操作
2.如何使用Redux-saga?
- 安装Redux-saga
npm install redux-saga - 在创建store时应用redux-thunk中间件
import { createStore, applyMiddleware } from 'redux' import createSagaMiddleware from 'redux-saga' //导入的redux-saga并不是像redux-thunk一样是一个对象，而是一个方法 const sagaMiddleware = createSagaMiddleware(); //使用该方法创建一个saga对象 const storeEnhancer = applyMiddleware(thunkMiddleware); //告诉系统使用中间件 const store = createStore(reducer, storeEnhancer); // 将saga和reducer联系起来 sagaMiddleware.run(); //将saga运行起来
- 在生成器函数中获取网络数据
import {takeEvery, put} from 'redux-saga/effects' import {GET_USER_INFO} from './constants'; import {changeAction} from './action'; function *myHandler() { // 获取网络数据 const data = yield fetch('http://127.0.0.1:7001/info') .then((response)=>{ return response.json(); }) .catch((error)=>{ console.log(error); }); // console.log(data); // 保存获取到的数据 // 相当于 store.dispatch(changeAction()); yield put(changeAction(data)); } function *mySaga() { // 指定需要拦截的action类型 // 指定拦截到这个类型的action之后交给谁来处理 yield takeEvery(GET_USER_INFO, myHandler) } export default mySaga;
- 如果我们只需要拦截一个类型的action, 那么直接通过
yield takeEvery / yield takeLatest即可;但是如果我们想同时拦截多个类型的action, 那么我们就必须借助另外一个函数all() - 如果我们只需要保存一个数据, 那么直接通过
yield put即可
但是如果我们想同时保存多个数据 , 那么我们就必须借助另外一个函数all()
// yield put(changeAction(data)); yield all([ yield put(changeUserAction(data1)), yield put(changeInfoAction(data2)), yield put({type:'CHANGE_USER_NAME', name: data1.name}) yield put({type:'CHANGE_USER_Age', name: data1.age}), ])
// yield takeEvery(GET_USER_INFO, myHandler) // yield takeLatest(GET_USER_INFO, myHandler) yield all([ yield takeEvery(GET_USER_INFO, myHandler), yield takeEvery(ADD_COUNT, myHandler), yield takeEvery(SUB_COUNT, myHandler), ]);
takeEvery和takeLatest
- 区别: 是否能够完整的执行监听方法
- 对于
takeEvery而言, 每次拦截到对应类型的action, 都会完整的执行监听方法 - 对于
takeLatest而言, 每次拦截到对应类型的action, 都不能保证一定能够完整的执行监听方法
例如: 连续派发了3次
GET_USER_INFO的action,那么对于takeEvery而言, myHandler就会被完整的执行3次;那么对于takeLatest而言, 如果派发下一次同类型action的时候,上一次派发的action还没有处理完, 也就是上一次的监听方法还没有处理完,那么takeLatest会放弃还没有处理完的代码, 直接开始处理下一次的action
React-saga实现原理
redux-saga和redux-thunk一样,是一个Redux中获取存储异步数据的中间件，而如果要实现react-saga的实现原理应该也要实同步代码获取异步数据的功能并将其存储起来
Generator函数是 ES6 提供的一种异步编程解决方案，因此可以使用Generator函数实现react-saga的原理
如果不知道Generator可以看看ES6新特性-Generator
function *gen() { const data = yield new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve('abc'); }, 3000) }); console.log('生成器函数中的data = ', data); } const result = gen(); // console.log(result.next()); // { value: Promise { <pending> }, done: false } result.next().value.then((data)=>{ // console.log('生成器函数外面的data = ', data); result.next(data); });
