从 generator 函数到 redux -saga（三）

最新推荐文章于 2022-03-16 11:44:23 发布

山西仓江科技有限公司

最新推荐文章于 2022-03-16 11:44:23 发布

阅读量408

点赞数

分类专栏： redux javascript js react

本文链接：https://blog.csdn.net/qq_37653449/article/details/85503474

版权

js 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 1 订阅

订阅专栏

react

10 篇文章 0 订阅

订阅专栏

take实现原理

<html>
	<head>
	</head>
    <body>
	<div id="test">qwe</div>
		<script>
			let $btn = document.getElementById("test");
			//channel是对事件源的抽象，作用是先注册一个take方法，当put触发时，执行一次take方法，然后销毁他。
				function channel() {
					let taker;
					// take 负责往任务队列 里面添加任务监听 
					function take(cb) { 
						taker = cb;
					}
					// put 负责触发给任务流中的next 传参  触发相应的监听
					function put(input) {
						if (taker) {
						const tempTaker = taker;
						taker = null;
						//tempTaker 就是下面的 runTakeEffect 中传进来的next 方法 把put 进来的action传进去
						tempTaker(input);
						}
					}
				
				return{
					put,// 发布者
					take, // 订阅者
				};
			}

			const chan = channel();

			function take() {
			return {
				type: 'take'
			};
			}
			//创建任务队列
			function* mainSaga() {
			const action = yield take();
			const actions = yield take();
			}

			function runTakeEffect(effect, cb) {
			chan.take(input => {
				cb(input);
			});
			}

			// Thunk 函数的自动流程管理 对应 从 generator 函数 到 redux -saga （二） 中的相应部分
			function task(iterator) {
			const iter = iterator();
			function next(args) {
				const result = iter.next(args);
				if (!result.done) {
				const effect = result.value;
				if (effect.type === 'take') {
					runTakeEffect(result.value, next);
				}
				}
			}
			next();
			}

			task(mainSaga);

			let i = 0;
			$btn.addEventListener('click', async() => {
			const action =`action data${i++}`;
			chan.put(action);
			}, false);	
		</script>
   </body>
</html>