前言React-Redux-Saga是一个用于处理Redux异步操作的中间件，它的实现原理基于生成器函数（Generator Functions）和事件监听模式。...本文的主题为 saga 的实现原理，那么与其说 sage 的实现原理，不如说在 saga 中如何通过 yield 获取异步返回的结果，在 React-Saga 中如何通过 yield 获取到数据之前，我还是建议去把博主在...好了，废话不多了，首先来看几个示例，对应的这几个案例分别说明了几个注意点，然后我们在实现 saga 中通过 yield 获取异步数据的底层实现代码，第一个示例如，定义了一个生成器函数, 这个函数保存了...这里就要强调一个注意点了，默认情况下并不会将 yield 的执行结果赋值给某个变量，在生成器函数中如果想给上一次 yield 对应的变量赋值，那么就必须在下一次调用 next 的时候给 next 传参，...，然后在通过拿到的可迭代对象调用 next 方法将获取到的方法，传递给上一次 yield 进行变量赋值，然后我们在自定义生成器函数的 yield 当中就获取到异步数据了从而实现了 saga 中在 yield
Saga后，react只负责数据如何展示，redux来负责数据的状态和绑定数据到react，而Saga处理了大部分复杂的业务逻辑。...TODO, 需要进一步验证） Javascript Generator 在使用Saga之前，建议先了解Javascript生成器，因为Saga的副作用都是通过生成器来实现的。...如何使用 redux-sage官方文档有很详细的使用说明，这里只做简单的上手说明。...也可以有第三个参数用来传递变量给方法。 call方法 call有些类似Javascript中的call函数， 不同的是它可以接受一个返回promise的函数，使用生成器的方式来把异步变同步。...put方法 put就是redux的dispatch，用来触发reducer更新store 有什么弊端 目前在项目实践中遇到的一些问题： redux-saga模型的理解和学习需要投入很多精力 因为需要用
默认的 redux-saga 导出（在代码中为 createSagaMiddleware）是创建中间件实例的工厂。...} Saga 只是生成器函数。...与正常函数不同，生成器可以用 yield 关键字暂停对异步语句的执行。...这使我们可以将 saga 和 reducers 并置在使用它们的组件附近。这也使它们易于管理，因为它们仅包含与附近文件相关的代码。 在例子中，exampleSaga只是执行一次并终止的普通函数。...我们将在以后的教程中探讨生成器的用法。
Redux-saga 简介redux-saga 和 redux-thunk 一样, 是一个 Redux 中获取存储异步数据的中间件redux-saga 可以直接拦截 dispatch 派发的 action...undefined);export default store;我们可以利用传入的生成器告诉 redux-saga, 需要拦截哪些 dispatch 派发的 action，声明一下，至于什么是生成器可去查看一下博主...JS 流程框架与特性 的标签里面会进行介绍什么是生成器，然后这个陌生的问题就过，我们继续，创建 saga.js 在当中定义生成器代码，在生成器函数中获取网络数据：import {takeEvery,...如上自定义函数已经获取到了网络数据，添加到 Redux 中保存是通过 Saga 提供的 put 方法进行添加即可，在更改 store.js 告诉 saga 中间件的生成器哪些通过 dispatch 派发的...即可，但是如果我们想同时保存多个数据 , 那么我们就必须借助另外一个函数, all()：saga.js:import {takeLatest, put, all} from 'redux-saga/effects'import
项目用到的技术框架 该项目采用 react 技术栈，用到的主要框架包括：react、 redux、 react-redux、 redux-actions、 reselect、 redux-saga、 seamless-immutable...设计模式与结构分析 在这个场景设计开发中，我们严格遵守 redux 单向数据流 与 react-redux 的最佳实践，并采用 redux-saga 来处理业务流， reselect 来处理状态缓存，通过...中间 store 中的内容都是 redux 相关的，看名称应该都能知道意思了。 具体的代码请看这里：https://github.com/deepfunc/react-test-demo。...saga 是一种 es6 的生成器函数 - Generator ，我们利用他来产生各种声明式的 effects ，由 redux-saga 引擎来消化处理，推动业务进行。...这个测试用例的步骤就是利用生成器函数一步步的产生下一个 effect ，然后断言比较。 从上面的注释 3、4 可以看到， redux-saga 还提供了一些辅助函数来方便的处理分支断点。
在这篇⽂章中，我们将使⽤微信小程序云作为我们的后端，并讲解如何引入和实现 Redux 异步工作流来实现小程序端访问⼩程序云的状态管理。...在循环内部，我们使用了 redux-saga 提供的 effects helper 函数：take，它用于监听 LOGIN action，获取 action 中携带的数据。...注意 对生成器函数不了解的同学可以看一下这篇文档：迭代器和生成器[13]。...SET_IS_OPENED：设置登录框开启/关闭的信息 我们还从 redux-saga/effects 包中导入了必要的函数： call：在 saga 函数中调用其他异步/同步函数，获取结果 put：...类似 dispatch，用于在 saga 函数中发起 action take：在 saga 函数中监听 action，并获取对应 action 所携带的数据 fork：在 saga 函数中无阻塞的调用
函数中的变量 在函数中，我们可以看到也进行了变量的使用，那函数中的变量和函数外的变量到底有什么区别呢？ 1.1....，在函数中name输出jerry # 但是，在函数外部，我们重新打印name的值，发现name的值还是tom # # 此时：函数中的name是局部变量，函数外部的name是全局变量 # 如此诡异的情况...函数中的变量隔离 如果函数中没有通过global引入全局变量，但是在函数中又使用了和全局变量相同的名称 此时就会出现问题 name = "tom" def test(): # 这里只是想使用一下全局变量的值...，首先描述一下错误出现的条件 1.如果函数中没有声明和全局变量名称一致的局部变量，函数中直接使用全局 变量的值，不会出现错误 2.如果函数中，一旦在任意位置定义了和全局变量名称一致的局部变量，函数中...在局部变量声明定义之前使用这个名称的变量，就会出现上述错误 这是因为，在函数中，一旦声明变量并且赋值一个局部变量，函数中又没有通过 global引入同名的全局变量，此时在函数中只会存在局部变量~
但是当需要处理异步的action（在函数式编程里称为副作用）的时候事情就没有这么简单了。为了解决这个问题，redux建议使用中间件（尤其是thunk）。...我们来看看如何写一个action creator来获取后端数据并分发到redux store。...action creator了，并且如你所见，唯一测试这个代码的方法是模拟获取数据的方法。...在上面的例子中我用了两种副作用： 一个put副作用，它会给redux store分发一个action。 一个call副作用，它会执行一个异步的方法（promise，cps后者其他的saga）。...所以，我们来看看如何在redux应用里添加saga。
如果存在副作用函数，那么我们需要首先处理副作用函数，然后生成原始的js对象。如何处理副作用操作，在redux中选择在发出action，到reducer处理函数之间使用中间件处理副作用。...是控制执行的generator，在redux-saga中action是原始的js对象，把所有的异步副作用操作放在了saga函数里面。...这些Effect执行后，当函数resolve时返回一个描述对象，然后redux-saga中间件根据这个描述对象恢复执行generator中的函数。...不需要模拟Api.fetch函数的具体返回结果。...的工具函数delay，delay的功能相当于延迟xx秒，因为真实的请求存在延迟，因此可以用delay在本地模拟真实场景下的请求延迟。
() => {} 生成器函数 function*() {} 异步生成器函数 async function*() {} 异步生成器函数非常特殊，因为你可以在异步生成器函数中同时使用 await 和...异步生成器函数与异步函数和生成器函数的不同之处在于，它们不返回 promise 或迭代器，而是返回一个异步迭代器。...你的第一个异步生成器函数 异步生成器函数的行为类似于生成器函数：生成器函数返回一个具有 next() 函数的对象，调用 next() 将执行生成器函数直到下一个 yield。...不同之处在于异步迭代器的 next() 函数返回了一个 promise。 下面是带有异步生成器功能的 “Hello, World” 例子。...首先，在上面的示例中，在 subscribe() 中记录到控制台的代码是响应式的，而不是命令式的。换句话说，subscribe() handler 无法影响异步函数主体中的代码，它仅对事件做出反应。
/sagas 模块中的 Saga。然后使用 redux-saga 模块的 createSagaMiddleware 工厂函数来创建一个 Saga middleware。...发起异步调用（副作用） 为了模拟现实中的计算，添加另外一个按钮，用于在点击 1 秒后增加计数 1.在 UI 组件上 Counter.js 添加一个额外的按钮和一个回调 onIncrementAsync...下面演示了这个辅助函数是如何由低级 Effect 实现的： const takeEvery = (patternOrChannel, saga, ...args) => fork(function*()...而在 take 的情况中，控制恰恰相反。与 action 被 推向（pushed） 任务处理函数不同，Saga 是自己主动 拉取（pulling） action 的。...Effect 是使用 redux-saga 提供的工厂函数创建的。
Store 模式 最简单的处理就是把状态存到一个外部变量里面，比如：this.root.data，当然也可以是一个全局变量。...而 Reducer 是一个纯函数，对于相同的输入，永远都只会有相同的输出，不会影响外部的变量，也不会被外部变量影响，不得改写参数。...redux-saga 采用了另外一种思路，它没有把异步操作放在 action creator 中，也没有去处理 reductor，而是把所有的异步操作看成“线程”，可以通过普通的action去触发它，当操作完成时也会触发...如果从没接触过 Generator 的话，看着下面的代码，给你个1分钟傻瓜式速成，函数加个星号就是 Generator 函数了，Generator 就是个骂街生成器，Generator 函数里可以写一堆...异步数据获取的相关业务逻辑放在了单独的 saga.js 中，不再是掺杂在 action.js 或 component.js 中。
在循环内部，我们使用了 redux-saga 提供的 effects helper 函数：take，它用于监听 CREATE_POST action，获取 action 中携带的数据。...如果创建帖子成功，我们使用 redux-saga 提供的 effects helpers 函数：put，put 类似之前在 view 中的 dispatch 操作，，来 dispatch 了三个 action...以及一些 redux-saga/effects 相关的 helper 函数，我们已经在之前的内容中详细讲过了，这里就不再赘述了。...在循环内部，我们使用了 redux-saga 提供的 effects helper 函数：take，它用于监听 GET_POSTS action，获取 action 中携带的数据。...在循环内部，我们使用了 redux-saga 提供的 effects helper 函数：take，它用于监听 GET_POST action，获取 action 中携带的数据，这里我们拿到了传过来的
组件从 store 中取数据，当交互的时候去通知 store 改变对应的数据。...但是 context 做为 store 有一个问题，任何组件都能从 context 中取出数据来修改，那么当排查问题的时候就特别困难，因为并不知道是哪个组件把数据改坏的，也就是数据流不清晰。...通过 redux-thunk 中间件，我们可以把异步过程通过函数的形式放在 dispatch 的参数里： const login = (userName) => (dispatch) => { dispatch...然后 task 会调用不同的实现函数来执行该 worker saga。 为什么要这样设计呢？直接执行不就行了，为啥要拆成 worker saga 和 task 两部分，这样理解成本不就高了么？...那么具体怎么执行的就可以随意的切换了，这样测试的时候只需要模拟传入对应的数据，就可以测试 worker saga 了。
Store 模式 最简单的处理就是把状态存到一个外部变量里面，比如：this.root.data，当然也可以是一个全局变量。但是这样有一个问题，就是数据改变后，不会留下变更过的记录，这样不利于调试。...而 Reducer 是一个纯函数，对于相同的输入，永远都只会有相同的输出，不会影响外部的变量，也不会被外部变量影响，不得改写参数。...redux-saga 采用了另外一种思路，它没有把异步操作放在 action creator 中，也没有去处理 reductor，而是把所有的异步操作看成“线程”，可以通过普通的action去触发它，当操作完成时也会触发...如果从没接触过 Generator 的话，看着下面的代码，给你个1分钟傻瓜式速成，函数加个星号就是 Generator 函数了，Generator 就是个骂街生成器，Generator 函数里可以写一堆...和 redux-thunk 等其他异步中间件对比来说，redux-saga 主要有下面几个特点：异步数据获取的相关业务逻辑放在了单独的 saga.js 中，不再是掺杂在 action.js 或 component.js
作为一个Redux中间件，想让Redux应用中的副作用（即依赖/影响外部环境的不纯的部分）处理起来更优雅 二.设计理念 Saga像个独立线程一样，专门负责处理副作用，多个Saga可以串行/并行组合起来，...P.S.关于generator与iterator的关系及generator基础用法，可以参考generator（生成器）_ES6笔记2 例如： const ts = Date.now(); function...所以添一层描述对象来解决这个问题，测试case中可以简单比较描述对象，实际起作用的Promise由redux-saga内部生成 这样做的好处是单测中不用mock异步方法（一般单测中会把所有异步方法替换掉...术语Saga指的是一系列操作的集合，是个运行时的抽象概念 redux-saga里的Saga形式上是generator，用来描述一组操作，而generator是个具体的静态概念 P.S.redux-saga...里所说的Saga大多数情况下指的都是generator形式的一组操作，而不是指redux-saga自身。
本文全部代码参照官方源码写成，函数名字和变量名字尽量保持一致，写到具体的方法的时候我也会贴出对应的代码地址，主要代码都在这里:github.com/redux-saga/… 先来看看我们用到了哪些API...currentTakers = []; // 一个变量存储我们所有注册的事件和回调 // 保存事件和回调的函数 // Redux-Saga里面take接收回调cb和匹配方法matcher...这里我们先实现take，takeEvery是在这个基础上实现的。Redux-Saga中这块代码是单独抽取了一个文件，我们仿照这种做法吧。...官方文档中的这种写法反而很好理解，我这里采用文档中的这种写法: export function takeEvery(pattern, saga) { function* takeEveryHelper...Redux-Saga增强了Redux的dispatch函数，在dispatch的同时会触发channel.put，也就是让Redux-Saga也响应回调。
redux-saga的功能也是一样的，参见下图： 左边的蓝圈圈里就是一堆saga，它们需要和外部进行异步I/O交互，等交互完成后再修改Store中的状态数据。...redux-saga就是一个帮你管理这堆saga的管家，那么它跟其他的中间件实现有什么不同呢？它使用了ES6中Generator函数语法。...5.redux-saga用法 根据上一节的分析，我们不仅需要实现一个Generator函数，还需要提供一个外部驱动函数。...但是这样的话不好做模拟（mock）测试：我们在测试过程中，一般不会真的执行异步任务，而是替换成一个假函数。实际上，我们只需要确保yield了一个正确的函数，并且函数有着正确的参数。...因此，相比于直接调用异步函数，我们可以仅仅 yield 一条描述函数调用的指令，由redux-saga中间件负责解释执行该指令，并在获得结果响应时恢复Generator的执行。
应用入口JS：index.js TodoApp 使用 Redux 管理应用状态，index.js作为应用入口，创建了Redux的Store并通过Provider接口将Store扩展到整个应用范围中； #...AntDesign（蚂蚁金服的React UI库） redux-saga 管理异步逻辑 react-router、react-router-redux 管理应用路由 使用了 ES6 的 decorator...配置Webpack UserCURD 使用 JSON-Server 模拟了一个后台数据服务器，所以需要将与数据处理相关的HTTP请求中转到 JSON-Server 服务器上； ? 3.4....总体架构 应用中的所有异步逻辑（请求数据、删除数据等）由redux-saga集中管理、应用的所有状态变化则由redux集中管理；借助这种结构，我们可以将应用的“状态变化”和“异步”这两个概念清晰的分离开...看一个Reducer reducer只用于处理应用状态改变，异步逻辑应写在saga中； ## src/reducer/userEdit.js ? C. 看一个Saga Saga有2大特性： 1.
Redux 中异步的请求怎么处理 可以在 componentDidmount 中直接进⾏请求⽆须借助redux。...action时，该action的函数体会自动执行 store.dispatch(action)}复制代码 （2）使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独...saga.js 中，不再是掺杂在 action.js 或 component.js 中 action摆脱thunk function: dispatch 的参数依然是⼀个纯粹的 action (FSA...功能强⼤: redux-saga提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来...Redux 状态管理器和变量挂载到 window 中有什么区别 两者都是存储数据以供后期使用。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
