今天来讲一下react里面的难点redux-saga
1.废话不多说, 直接上代码
上述是一个简单的计数的应用, 添加了saga中间件。
- 看下reducer长啥样12345678910111213// 很简单的一个reducer 我们会发现action('DECREMENT_ASYNC') 根本dispatch不到这里。。。 看下面的saga文件export default function counter(state = 0, action) {switch (action.type) {case 'INCREMENT':return state + 1case 'INCREMENT_IF_ODD':return (state % 2 !== 0) ? state + 1 : statecase 'DECREMENT':return state - 1default:return state}}
3.下面就是展现技术的时候了, saga文件
相信看到这里大家也该明白了 redux-saga到底是啥了吧
- 来点高级的玩法1234567891011121314151617181920212223242526272829303132// 下面展示了 每3次点击INCREMENT_ASYNC后的逻辑function* watchFirstThreeTodosCreation() {for (let i = 0; i < 1000; i++) {const action = yield take('INCREMENT_ASYNC')if(i % 3 == 0)yield call(API.say, '3 times increment')}}const Api = {getName(name){return new Promise((resolve, reject) => {setTimeout(() => {resolve(name+'sssss');}, 5000)})}}function* watchFirstThreeTodosCreation() {while (true) {const {name} = yield take('INCREMENT_ASYNC');// yield call 是一个阻塞的effect 在此3会等待5s 才能执行 take('DECREMENT_ASYNC')yield call(Api.getName, 'dddd');// fork是async 下面的执行不会受影响const task = yield fork(Api.getName, 'dddd');console.log('111--2222' + name)yield take('DECREMENT_ASYNC')// 可以清除上面的fork返回的taskyield cancel(task)}}
看到这里是不是心情激动, 又有装备的资本了, 没玩还有
5.saga race用法
6.课后思考题
这一段代码如何理解。。。 后面还会带来saga的更多分享