大家好，又见面了，我是你们的朋友全栈君。 本文用以记录从调研Redux Saga，到应用到项目中的一些收获。...拿到后端返回状态 （promise so easy…） 隐藏提示信息 (这个有点难度，不过难不倒我，我给组建加一个控制属性) 更新redux store （dispatch咯。。。）...Saga后，react只负责数据如何展示，redux来负责数据的状态和绑定数据到react，而Saga处理了大部分复杂的业务逻辑。...TODO, 需要进一步验证） Javascript Generator 在使用Saga之前，建议先了解Javascript生成器，因为Saga的副作用都是通过生成器来实现的。...call方法 call有些类似Javascript中的call函数， 不同的是它可以接受一个返回promise的函数，使用生成器的方式来把异步变同步。
作为一个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自身。
映射就是把一个列表按照一定规则映射成另一个列表，而 reduce 是把一个列表通过一定规则进行合并，也可以理解为对初始值进行一系列的操作，返回一个新的值。...Redux-promise redus-promise 和 redux-thunk 的思想类似，只不过做了一些简化，成功失败手动 dispatch 被封装成自动了： const FETCH_DATA =...redux-thunk 和 redux-promise 刚好就是代表这两个面。 redux-thunk 和 redux-promise 的具体使用就不介绍了，这里只聊一下大概的思路。...把UI组件的事件映射到 dispatch 方法 Redux-saga 刚才介绍了两个Redux 处理异步的中间件 redux-thunk 和 redux-promise，当然 redux 的异步中间件还有很多...之前我们聊了 redux、react-redux、redux-saga 之类的概念，大家肯定觉得头昏脑涨的，什么 action、reducer、saga 之类的，写一个功能要在这些js文件里面不停的切换
也一直听说redux-saga是个和redux-thunk能够实现类似功能的库，而且redux-saga的处理方法更加高压和方便。这几天阅读了下文档写些小结。...以下是一些saga的常用方法 redux/saga takeEvery yield* takeEvery('PRODUCTS_REQUESTED', fetchProducts) 每当有PRODUCTS_REQUESTED...注意的是，如果call调用fetch，在默认的fetch状态下返回的是Promise实例，但是由于是call调用，返回的是文本信息，可以直接调用 - put - put({type: '...的时候，backgroundTask函数内就会抛出异常 }) } } 其它 yield [fun1,fun2] 并发执行fun1、fun2 相当于Promise.all 的功能，所有的fun...未被捕获的话，这个错误是不会向上冒泡的 使用redux-saga来处理一些复杂的流程的时候似乎比较不错
前言React-Redux-Saga是一个用于处理Redux异步操作的中间件，它的实现原理基于生成器函数（Generator Functions）和事件监听模式。...本文的主题为 saga 的实现原理，那么与其说 sage 的实现原理，不如说在 saga 中如何通过 yield 获取异步返回的结果，在 React-Saga 中如何通过 yield 获取到数据之前，我还是建议去把博主在...好了，废话不多了，首先来看几个示例，对应的这几个案例分别说明了几个注意点，然后我们在实现 saga 中通过 yield 获取异步数据的底层实现代码，第一个示例如，定义了一个生成器函数, 这个函数保存了...，模拟获取异步数据的场景：function* gen() { const data = yield new Promise((resolve, reject) => { setTimeout...，然后在通过拿到的可迭代对象调用 next 方法将获取到的方法，传递给上一次 yield 进行变量赋值，然后我们在自定义生成器函数的 yield 当中就获取到异步数据了从而实现了 saga 中在 yield
redux-promise：基于Promise的异步处理； redux-promise-middleware：还是Promise； redux-saga：最优雅！最复杂！ ? ?...({type:"INC", payload: Promise}); 注：redux-promise 允许我们 dispatch 一个 payload 为 Promise 的 action； redux-saga...: store.dispatch({type:"INC", payload:...}); 注：redux-saga 不会变动 action 的本来含义，action 仍然是一个普通的 JS 对象； redux-saga...总结： redux-saga是最优雅的，也是最复杂的异步中间件： a. 有强大的异步流程控制功能（例：takeEvery、takeLatest）； b....异步业务逻辑被集中在 Saga 中管理； c. 没有修改 action 原本的含义； d.
项目用到的技术框架 该项目采用 react 技术栈，用到的主要框架包括：react、 redux、 react-redux、 redux-actions、 reselect、 redux-saga、 seamless-immutable...接下来，我们就开始编写具体的测试用例代码了，下面会针对每个层面给出代码片段和解析。那么我们先从 actions 开始吧。...saga 是一种 es6 的生成器函数 - Generator ，我们利用他来产生各种声明式的 effects ，由 redux-saga 引擎来消化处理，推动业务进行。...这个测试用例的步骤就是利用生成器函数一步步的产生下一个 effect ，然后断言比较。 从上面的注释 3、4 可以看到， redux-saga 还提供了一些辅助函数来方便的处理分支断点。...主要注意 fetch 是 promise 返回， jest 的各种异步测试方案都能很好满足。
如果redux需要用到 side effect 异步操作,redux-thunk 和 redux-saga 绝对是目前两个最受欢迎的中间件插件。...redux-saga redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk...，所有的任务都通过用 yield Effects 来完成 ( effect可以看作是redux-saga的任务单元 ) redux-saga启动的任务可以在任何时候通过手动来取消，也可以把任务和其他的Effects...内触发异步操作（Side Effect）总是由 yield 一些声明式的 Effect 来完成的，Effect是一个 普通js对象，包含一些将被 saga middleware 执行的指令。...Effect 是使用 redux-saga 提供的工厂函数创建的。
redux-saga是redux的中间件，主要负责从action派发到更新store中间具有副作用行为的处理。...saga中yield 后面的内容我们称呼它为Effect(redux-saga的任务单元)，在Effects中我们可以进行启动其它saga，也可以处理一些副作用操作。...如果返回Promise将获得Promise的value。...call创建的Effect会命令中间件调用传入的函数，并检查其结果，如果结果是迭代器对象或者是Promise实例中间件将一直暂停当前saga直到迭代器对象或Promise实例处理完毕。...一个task就想一个在后台运行的进程，在redux-saga应用程序中，可以运行多个task，task可通过fork函数创建。
mapStateToProps 把容器组件的 state 映射到UI组件的 props mapDispatchToProps 把UI组件的事件映射到 dispatch 方法 每一次全局状态发生变化，所有的容器型组件都会得到通知...比如 redux-thunk 或 redux-promise,分别是使用异步回调和 Promise 来解决异步 action 问题的。...redux-saga redux-saga是一个Redux中间件，用来帮你管理程序的副作用。或者更直接一点，主要是用来处理异步action。...关于saga原理的，推举阅读《前端技术栈(三)：redux-saga，化异步为同步》 什么是Saga？...redux-saga的优势 Redux 处理异步的中间件 redux-thunk 和 redux-promise，当然 redux 的异步中间件还有很多，他们可以处理大部分场景，这些中间件的思想基本上都是把异步请求部分放在了
默认的 redux-saga 导出（在代码中为 createSagaMiddleware）是创建中间件实例的工厂。...} Saga 只是生成器函数。...与正常函数不同，生成器可以用 yield 关键字暂停对异步语句的执行。...我们将在以后的教程中探讨生成器的用法。...Redux-Saga 配置 Store 这是整合 redux-saga 之后我们最终 store 的配置。
redux-saga是一个Redux中间件，用来帮你管理程序的副作用。或者更直接一点，主要是用来处理异步action。...redux-saga的功能也是一样的，参见下图： 左边的蓝圈圈里就是一堆saga，它们需要和外部进行异步I/O交互，等交互完成后再修改Store中的状态数据。...redux-saga就是一个帮你管理这堆saga的管家，那么它跟其他的中间件实现有什么不同呢？它使用了ES6中Generator函数语法。...这在redux-saga中被称为worker saga和watcher saga： worker saga：具体业务逻辑实现 watcher saga：接收特定的action，然后驱动worker...实际上，我们可以直接通过yield fetchUser()执行我们的异步任务，并返回一个Promise。
从简单的 react-thunk 到 redux-promise 再到 redux-saga等等，都代表这各自解决redux异步流管理问题的方案 4.1 、redux-thunk redux-thunk...，在函数内进行异步操作。...4.2、redux-promise 使用redux-promise中间件，允许action是一个promise，在promise中，如果要触发action，则通过调用resolve来触发 4.3、redux-sage...redux-saga将react中的同步操作与异步操作区分开来，以便于后期的管理与维护 ，redux- saga相当于在Redux原有数据流中多了一层，通过对Action进行监听，从而捕获到监听的Action...,前者则是获取store里面的状态，用于建立组件跟store的state的映射关系，后者则是用于建立组件跟store.dispatch的映射关系。
否则会出现惊喜 call generator 只能接受到返回值 redux-saga初使用 安装: yarn add redux-saga store.js import { createStore...from 'redux-saga'; // 导入创建saga的函数 import {add, deleter} from '....// 查询store的状态 takeEvery // 对action进行监听 } from 'redux-saga/effects'; export function* fetchData...但是fork是非阻塞函数 不会等待执行 put 解释: put函数相当于redux的dispatch 当put一个action后。...reducer中就会计算新的state并返回 注意: put也是阻塞effect call 解释: call函数 调用其他函数 调用的函数可以是Generator 或者是返回一个promise的简单函数
Redux-saga 简介redux-saga 和 redux-thunk 一样, 是一个 Redux 中获取存储异步数据的中间件redux-saga 可以直接拦截 dispatch 派发的 action...如果导入的是redux-saga, 那么返回给我们的是一个用于创建中间件对象的方法* */import createSagaMiddleware from 'redux-saga'import...undefined);export default store;我们可以利用传入的生成器告诉 redux-saga, 需要拦截哪些 dispatch 派发的 action，声明一下，至于什么是生成器可去查看一下博主...JS 流程框架与特性 的标签里面会进行介绍什么是生成器，然后这个陌生的问题就过，我们继续，创建 saga.js 在当中定义生成器代码，在生成器函数中获取网络数据：import {takeEvery,...如上自定义函数已经获取到了网络数据，添加到 Redux 中保存是通过 Saga 提供的 put 方法进行添加即可，在更改 store.js 告诉 saga 中间件的生成器哪些通过 dispatch 派发的
解耦 上面的代码在很多业务里非常常见，常见到我们根本不需要什么 redux-thunk，redux-saga 来处理。...有的，再比如你写成 Promise 的形式，然后 dispach(acitonPromise) ，然后自己在中间件里解析这个 Promise： export default function promiseMiddleware...OK，一个月下载量 7 万的 redux-promise 中间件就实现了。啊？这么简单的代码都值 7 万？...不行，我也要自己编 pattern，把 Promise 改成 generator：dispatch(actionGenerator) 不就又一个 pattern 了，但是这个已经被 redux-saga...目前来说，redux-thunk, redux-saga 以及 redux-loop 是比较常用的 “pattern 解析器”，他们自己都提供了一套属于自己的 pattern，让开发者在自己的框架里随意
简单介绍一下thunk，这是一个中间件，是解决redux异步问题产生的。...我们都知道，在使用redux的时候，通过dispatch一个action 发生到reducer 然后传递给store修改状态 一系列都是同步的，那如果说我dispatch一个action 这个action...redux比较常用的中间件有 redux-saga、redux-thunk、redux-promise等 都是为了解决dispatch action异步处理问题 redux中间件 对redux应用实现异步...可以将 thunk 看做 store 的 dispatch() 方法的封装器；我们可以使用 thunk action creator 派遣函数或 Promise，而不是返回 action 对象。...( combineReducers({add, deleter}), applyMiddleware(thunk) // 应用thunk中间件 ); // 在对dispatch函数进行映射时
这种机制可以让我们改变数据流，实现如异步action ，action 过滤，日志输出，异常报告等功能redux-logger：提供日志输出redux-thunk：处理异步操作redux-promise：...id='1111' 可以用url，qs，querystring，浏览器提供的api URLSearchParams对象或者自己封装的方法去解析出id的值。...redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等redux-saga缺陷:额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗
本文要讲的就是Redux-Saga，这个也是我在实际工作中使用最多的Redux异步解决方案。...本文仍然是老套路，先来一个Redux-Saga的简单例子，然后我们自己写一个Redux-Saga来替代他，也就是源码分析。...，然后进行处理，我这里代码简化了，只支持IO这种effect，官方源码中还支持promise和iterator，具体的可以看看他的源码：github.com/redux-saga/… effectRunner...// Redux-Saga不仅仅支持这种字符串，还支持多种形式，也可以自定义matcher来解析 channel.take(cb, matcher); } const effectRunnerMap...runCallEffect 前面我们发起API请求还用到了call，一般我们使用axios这种库返回的都是一个promise，所以我们这里写一种支持promise的情况，当然普通同步函数肯定也是支持的：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
