Redux-saga 简介redux-saga 和 redux-thunk 一样, 是一个 Redux 中获取存储异步数据的中间件redux-saga 可以直接拦截 dispatch 派发的 action..., 从而实现在执行 reducer 之前执行一些其它操作使用 Redux-saga安装 Redux-saganpm install redux-saga在创建 store 时应用 redux-saga...中间件，更改 store.jsimport {createStore, applyMiddleware} from 'redux'/*注意点: 如果导入的是redux-thunk, 那么返回给我们的是一个中间件对象...put} from 'redux-saga/effects'import {GET_USER_INFO} from '....中保存是通过 Saga 提供的 put 方法进行添加即可，在更改 store.js 告诉 saga 中间件的生成器哪些通过 dispatch 派发的 action 需要进行拦截, 在 run 方法进行指定
否则会出现惊喜 call generator 只能接受到返回值 redux-saga初使用 安装: yarn add redux-saga store.js import { createStore...from 'redux-saga'; // 导入创建saga的函数 import {add, deleter} from '....sagaMiddleware.run(watch); Saga/saga.js import { call, // 调用一个函数 put, take, select,...解释: put函数相当于redux的dispatch 当put一个action后。.... yield select(state => state.getTodoList.list) 可以通过函数返回值更改值 all 解释: yield all([call(1), call(2)]) 相当于
本文地址 我们知道redux-saga 也是通过中间件的形式与 redux 本身连接起来。...例如下面使用了redux-saga的react项目需要以下这样的 初始化 function configureStore(initialState) { // 运行返回一个redux middleware...的第一步，就从 redux-saga 的中间件开始。...return sagaMiddleware; } 在了解 saga 的运行机制之前，先学习 redux-saga 源码内部的两个比较常用的数据结构buffer和chanel。...通过pushIndex和popIndex标识位来记录出入队列的位置，它们的初始值都是 0，出队列的时候直接把popIndex位置空，然后值+1。入队列则是pushIndex+1。
文章目录 资料 redux-saga简介 常用API takeLatest takeEvery take delay put call fork cancel all 案例1：错误处理了 案例2：错误未处理...sagas.js文件 import { all, put, takeEvery } from 'redux-saga/effects' function* increment() {...Effects是一些简单对象，如下put({ type: ‘increment’ })，我们使用redux-saga提供的put方法创建一个Effect对象。...如果直接打印Effect： console.log(put({ type: 'increment' })); 在 redux-saga 的世界里，Saga 都用 Generator 函数实现...import { put, delay } from 'redux-saga/effects' function* increment() { yield put({ type: 'increment
作为一个Redux中间件，想让Redux应用中的副作用（即依赖/影响外部环境的不纯的部分）处理起来更优雅 二.设计理念 Saga像个独立线程一样，专门负责处理副作用，多个Saga可以串行/并行组合起来，...还要实现： 作为middleware接入到Redux 提供读/写Redux state的接口（select/put） 提供监听action的接口（take/takeEvery/takeLatest） Sagas...error的传递方式，所以如果任一task有未捕获的error，当前saga也会结束 另外，cancel机制比较有意思： 对于执行中的task序列，所有task自然完成时，把结果向上传递到队首，作为上层某个...术语Saga指的是一系列操作的集合，是个运行时的抽象概念 redux-saga里的Saga形式上是generator，用来描述一组操作，而generator是个具体的静态概念 P.S.redux-saga...里所说的Saga大多数情况下指的都是generator形式的一组操作，而不是指redux-saga自身。
技术的选型 项目主要使用了redux，react-redux，redux-saga，seamless-immutable，reduxsauce。...（Effect 可以看作是 redux-saga 的任务单元）。.../saga' // 引入saga中相关组件 import createSagaMiddleware from 'redux-saga' // 引入react-redux相关组件 使redux和react...写法 // 引入 redux-saga中 引入effect import {call, put, take, fork, takeEvery, select} from 'redux-saga/effects...image 参考文献 React+Redux-Saga+Seamless-Immutable+Reduxsauce后台系统搭建之路 reduxsauce npm地址 redux-saga中文 redux-saga
触发某个action， 作用和dispatch相同： yield put({ type: 'CLICK' }); 具体的例子： import { call, put } from 'redux-saga...yield take(['LOGOUT', 'LOGIN_ERROR']) redux-saga使用案例 引入saga: import { call, put, take, select } from...首先，在redux-saga中提供了一系列的api，比如take、put、all、select等API ，在redux-saga中将这一系列的api都定义为Effect。...yield call(fetch,'/userInfo',username) put 在前面提到，redux-saga做为中间件，工作流是这样的： UI——>action1————>redux-saga...相应的这里的put对应与redux中的dispatch，工作流程图如下： 从图中可以看出redux-saga执行副作用方法转化action时，put这个Effect方法跟redux原始的dispatch
这个时候就需要redux-saga了。在redux-saga里saga就是一个可声明的组织良好的副作用实现方式（超时，API调用等等。。）...我们来看看用saga代替action creator获取todo数据的方法：import { call, put } from 'redux-saga'; function* loadTodos()...在上面的例子中我用了两种副作用： 一个put副作用，它会给redux store分发一个action。 一个call副作用，它会执行一个异步的方法（promise，cps后者其他的saga）。...现在，测试这个saga就非常的容易了： import { call, put } from 'redux-saga'; const mySaga = loadTodos(); const myTodos...看代码： import { fork, take } from 'redux-saga'; function* loadTodos() { yield put({ type: 'FETCHING_TODOS
redux-saga redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk..."; import { put,takeEvery,all } from "redux-saga/effects"; function* helloSaga(){ console.log('hello...redux-saga 使用 PUT 来描述dispatch 一个 action 到 Store 而不是直接dispatch action 的原因也是为了方便测试。...import { call,put } from "redux-saga/effects"; function * incrementAsync(){ yield call(delay,1000...import { take, put, call, fork, cancel } from 'redux-saga/effects' // ... function* loginFlow() {
redux-saga redux-saga 并没有改变 action，它会把 action 透传给 store，只是多加了一条异步过程的处理。...put({ type: 'loginError', error }) } } function* logout() { yield put({ type: 'logoutSuccess'})...worker saga 只是告诉了 task 应该做什么处理，通过 call、fork、put 这些命令（这些命令叫做 effect）。...但是 redux-saga 的优点还有基于 generator 的良好的可测试性，而且大多数场景下，redux-saga 提供的异步过程的处理能力就足够了，所以相对来说，redux-saga 用的更多一些...worker saga 可以用 put、call、fork 等 effect 来描述不同的副作用，由 task 负责执行。
可以看到Redux-Saga这种机制也是用takeEvery先注册回调，然后使用put发出消息来触发回调执行，这其实跟我们其他文章多次提到的发布订阅模式很像。...并执行，如果遇到take就将它注册到channel上去，如果遇到put就将对应的回调拿出来执行，但是Redux-Saga又将这个过程分为了好几层，我们一层一层来看吧。...再来回顾下他的主要要点： Redux-Saga其实也是一个发布订阅模式，管理事件的地方是channel，两个重点API：take和put。...put是发出事件，他是使用Redux dispatch发出事件的，也就是说put的事件会被Redux和Redux-Saga同时响应。...Redux-Saga增强了Redux的dispatch函数，在dispatch的同时会触发channel.put，也就是让Redux-Saga也响应回调。
Redux-Saga中间件 redux-saga中文文档地址：https://redux-saga-in-chinese.js.org/docs/basics/DeclarativeEffects.html...当我们需要执行一些异步操作时，由于action中只能返回一个对象，从而需要借助一些中间件来达到目的，redux-thunk 和 redux-saga是常见的两种中间件。 .../sagas"; import createSagaMiddleware from "redux-saga"; // 创建 redux-saga 中间件 const sagaMiddleware =...redux-saga中有很多 声明 effects 函数（比如：call、put、takeEvery、all、fock等等），具体请查阅redux-saga文档。...备注：redux-saga函数必须是一个Generator函数 拓展：还可以通过以下代码来将saga进行模块化： import { all, fork } from 'redux-saga/effects
也一直听说redux-saga是个和redux-thunk能够实现类似功能的库，而且redux-saga的处理方法更加高压和方便。这几天阅读了下文档写些小结。...以下是一些saga的常用方法 redux/saga takeEvery yield* takeEvery('PRODUCTS_REQUESTED', fetchProducts) 每当有PRODUCTS_REQUESTED...) takeEvery('\*', function * xx(){/\** ***/})表示匹配所有的action takeLatest 只执行最新的任务，之前如果有正在执行的任务则会被取消 redux-saga...} from 'redux-saga/effects' import Api from '...'...未被捕获的话，这个错误是不会向上冒泡的 使用redux-saga来处理一些复杂的流程的时候似乎比较不错
本文用以记录从调研Redux Saga，到应用到项目中的一些收获。...项目链接： https://github.com/fanxiao168/React-todoList 什么是Redux Saga 官网解释 来自：https://github.com/redux-saga.../redux-saga redux-saga is a library that aims to make side effects (i.e. asynchronous things like data...sagas.js import { takeEvery ,put } from 'redux-saga/effects'; import { GET_INIT_LIST } from '....put方法 put就是redux的dispatch，用来触发reducer更新store 有什么弊端 目前在项目实践中遇到的一些问题： redux-saga模型的理解和学习需要投入很多精力 因为需要用
1 react生态中，antd pro占据重要的位置。非常多的团队使用其来完成自己的中后台应用。...它的核心数据处理方案dva聚合了react-redux, redux-saga，极大的降低了redux使用的复杂度。因此使用antd pro无疑是一个非常好的方案。 但是！...例如： 接口请求的异常处理被封装成公共逻辑，未做差异化处理 /** * 配置request请求时的默认参数 */ const request = extend({ errorHandler, /...*fetchUserCurrent(_, { call, put }) { const response = yield call(queryCurrent); yield put({...type: 'save', payload: { currentUser: response, }, }); }, 一些地方官方也没有找到合适的实践方案，例如在redux-saga
redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...（1）使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow 易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等 redux-saga...} from 'redux-saga/effects'import {initTodoList} from '....但是Redux状态更改可回溯——Time travel，数据多了的时候可以很清晰的知道改动在哪里发生，完整的提供了一套状态管理模式。
redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...（1）使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow 易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等 redux-saga...} from 'redux-saga/effects' import {initTodoList} from '....但是Redux状态更改可回溯——Time travel，数据多了的时候可以很清晰的知道改动在哪里发生，完整的提供了一套状态管理模式。
处理异步 对于异步操作来说，有两个非常关键的时刻：发起请求的时刻，和接收到响应的时刻（可能成功，也可能失败或者超时），这两个时刻都可能会更改应用的 state。...举个例子： // saga.js import { take, put } from 'redux-saga/effects' function* mySaga(){ // 阻塞: take方法就是等待...也就是相当于take、put、call、put 这几个方法的调用变成了同步的，上面的全部完成返回了，才会执行下面的，类似于 await。...对比 Redux-thunk 比较一下 redux-thunk 和 redux-saga 的代码： 和 redux-thunk 等其他异步中间件对比来说，redux-saga 主要有下面几个特点：...之前我们聊了 redux、react-redux、redux-saga 之类的概念，大家肯定觉得头昏脑涨的，什么 action、reducer、saga 之类的，写一个功能要在这些js文件里面不停的切换
3.什么是redux-saga？ redux-saga是一个Redux中间件，用来帮你管理程序的副作用。或者更直接一点，主要是用来处理异步action。...redux-saga就是一个帮你管理这堆saga的管家，那么它跟其他的中间件实现有什么不同呢？它使用了ES6中Generator函数语法。...这在redux-saga中被称为worker saga和watcher saga： worker saga：具体业务逻辑实现 watcher saga：接收特定的action，然后驱动worker...然后我们看下workerSaga，可以看到并不是直接调用异步函数或者派发action，而是通过call()以及put()这样的函数。这就是redux-saga中最为重要的一个概念：Effect。...from 'redux-saga' import reducer from '.
简言之：dva想提供一个基于业界react&redux最佳实践的业务框架，以解决用裸redux全家桶作为前端数据层带来的种种问题 编辑成本高，需要在reducer, saga, action之间来回切换...依赖关系 dva react react-dom dva-core redux redux-saga history react-redux react-router-redux...subscriptions // redux-saga里的sagas effects // redux里的reducer reducers }; dva-core实际所作的主要工作是从...model配置得到reducers，worker sagas, states后，屏蔽接下来的一系列繁琐工作： 接redux（组合state，组合reducer） 接redux-saga（完成redux-saga...和redux，靠redux中间件机制把redux-saga拉进来一起玩） 到这里差不多封装好了，那么，下面开一些口子增加一点灵活性： 递出一堆钩子（effect/reducer/action/state
领取专属 10元无门槛券
手把手带您无忧上云
