React-Redux-Saga实现原理

简介: React-Redux-Saga实现原理

前言


React-Redux-Saga是一个用于处理Redux异步操作的中间件,它的实现原理基于生成器函数(Generator Functions)和事件监听模式。


本文的主题为 saga 的实现原理,那么与其说 sage 的实现原理,不如说在 saga 中如何通过 yield 获取异步返回的结果,在 React-Saga 中如何通过 yield 获取到数据之前,我还是建议去把博主在 JS新特性+流程框架 标签中编写的 Generator 函数文章进行观看一遍,这样对于阅读本文会更加的简单。


好了,废话不多了,首先来看几个示例,对应的这几个案例分别说明了几个注意点,然后我们在实现 saga 中通过 yield 获取异步数据的底层实现代码,第一个示例如,定义了一个生成器函数, 这个函数保存了 3 个状态:

function* gen() {
    yield '123';
    yield '456';
    yield '789';
}

然后只要执行生成器函数, 就会拿到一个可迭代对象:

const result = gen();
console.log(result);



注意点:

  • 执行生成器函数并不会执行对应的函数体
  • 只要调用一个 next 方法, 就会执行一个 yield
console.log(result.next());
console.log(result.next());
console.log(result.next());


然后呢,如上的这个示例就先过了,继续往下看第二个示例,也是定义了一个生成器函数:

function* gen() {
    console.log('1 + 1');
    yield 1 + 1;
    console.log('2 + 2');
    yield 2 + 2;
    console.log('3 + 3');
    yield 3 + 3;
}


这里有一个注意点需要强调下,每次调用 next 方法执行的是当前对应 yield 和上次 yield 之前所有的代码。

const result = gen();
console.log(result.next());
console.log(result.next());
console.log(result.next());


示例二结束,示例三开始:

function* gen() {
    const a = yield 1 + 1;
    console.log('a = ', a);
    const b = yield 2 + 2;
    console.log('b = ', b);
    const c = yield 3 + 3;
    console.log('c = ', c);
}
const result = gen();
console.log(result.next());
console.log(result.next());

如上代码,在博主运行之后发现结果如下:


首先看第一个 { value: 2, done: false } 说明是我们第一个 yield 执行得到的结果,然后我又再次执行了 next 然后按照如上所说每次调用 next 方法执行的是当前对应 yield 和上次 yield 之前所有的代码,可以得出我们的 a 打印代码会被执行了,然后发现是 undefined,这又是为啥呢?这里就要强调一个注意点了,默认情况下并不会将 yield 的执行结果赋值给某个变量,在生成器函数中如果想给上一次 yield 对应的变量赋值,那么就必须在下一次调用 next 的时候给 next 传参,生成器函数会将下一次 next 传递的参数作为上一次 yield 变量的值,然后我们的代码就可以演变为如下的样子:

const a = result.next();
const b = result.next(a.value);
const c = result.next(b.value);
const d = result.next(c.value);


好了三个示例说完了,接下来就是具体的实现代码了, 首先定义了一个生成器函数,模拟获取异步数据的场景:

function* gen() {
    const data = yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('abc');
        }, 3000)
    });
    console.log('生成器函数中的data = ', data);
}


然后调用定义的函数获取异步数据,然后在通过拿到的可迭代对象调用 next 方法将获取到的方法,传递给上一次 yield 进行变量赋值,然后我们在自定义生成器函数的 yield 当中就获取到异步数据了从而实现了 saga 中在 yield 中获取异步数据的过程啦最后部分的代码如下:

const result = gen();
result.next().value.then((data) => {
    result.next(data);
});


推荐阅读: https://zhuanlan.zhihu.com/p/37356948



最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
6月前
|
算法 前端开发 JavaScript
React的diff算法原理
React的diff算法原理
116 0
|
6月前
|
JSON 缓存 前端开发
【React】React原理面试题集锦
本文集合一些React的原理面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
129 0
|
1月前
|
存储 前端开发 测试技术
React Hooks 的工作原理
【10月更文挑战第1天】
|
2月前
|
移动开发 前端开发 应用服务中间件
React两种路由模式的实现原理
React两种路由模式的实现原理
77 3
|
3月前
|
前端开发 算法 JavaScript
React原理之Diff算法
【8月更文挑战第24天】
|
3月前
|
存储 JavaScript 前端开发
react redux 实现原理
【8月更文挑战第29天】react redux 实现原理
25 4
|
3月前
|
前端开发 JavaScript 算法
如何学习react原理
【8月更文挑战第9天】 如何学习react原理
45 6
|
3月前
|
移动开发 前端开发 JavaScript
react路由实现原理
【8月更文挑战第11天】react路由实现原理
42 1
|
3月前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
34 0
|
3月前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
41 0