redux-saga 初识和使用


Posted in Javascript onMarch 10, 2018

redux-saga 是一个管理 Redux 应用异步操作的中间件,功能类似redux-thunk + async/await, 它通过创建 Sagas 将所有的异步操作逻辑存放在一个地方进行集中处理。

redux-saga 的 effects

redux-saga中的 Effects 是一个纯文本 JavaScript 对象,包含一些将被 saga middleware 执行的指令。这些指令所执行的操作包括如下三种:

  1. 发起一个异步调用(如发一起一个 Ajax 请求)
  2. 发起其他的 action 从而更新 Store
  3. 调用其他的 Sagas

Effects 中包含的指令有很多,具体可以异步API 参考进行查阅

redux-saga 的特点

方便测试,例如:

assert.deepEqual(iterator.next().value, call(Api.fetch, '/products'))
  1. action 可以保持其纯净性,异步操作集中在 saga 中进行处理
  2. watch/worker(监听->执行) 的工作形式
  3. 被实现为 generator
  4. 对含有复杂异步逻辑的应用场景支持良好
  5. 更细粒度地实现异步逻辑,从而使流程更加清晰明了,遇到 bug 易于追踪和解决。
  6. 以同步的方式书写异步逻辑,更符合人的思维逻辑
  7. 从 redux-thunk 到 redux-saga

假如现在有一个场景:用户在登录的时候需要验证用户的 username 和 password 是否符合要求。

使用 redux-thunk 实现

获取用户数据的逻辑(user.js):

// user.js

import request from 'axios';

// define constants
// define initial state
// export default reducer

export const loadUserData = (uid) => async (dispatch) => {
  try {
    dispatch({ type: USERDATA_REQUEST });
    let { data } = await request.get(`/users/${uid}`);
    dispatch({ type: USERDATA_SUCCESS, data });
  } catch(error) {
    dispatch({ type: USERDATA_ERROR, error });
  }
}

验证登录的逻辑(login.js):

import request from 'axios';
import { loadUserData } from './user';

export const login = (user, pass) => async (dispatch) => {
  try {
    dispatch({ type: LOGIN_REQUEST });
    let { data } = await request.post('/login', { user, pass });
    await dispatch(loadUserData(data.uid));
    dispatch({ type: LOGIN_SUCCESS, data });
  } catch(error) {
    dispatch({ type: LOGIN_ERROR, error });
  }
}

redux-saga

异步逻辑可以全部写进 saga.js 中:

export function* loginSaga() {
 while(true) {
  const { user, pass } = yield take(LOGIN_REQUEST) //等待 Store 上指定的 action LOGIN_REQUEST
  try {
   let { data } = yield call(loginRequest, { user, pass }); //阻塞,请求后台数据
   yield fork(loadUserData, data.uid); //非阻塞执行loadUserData
   yield put({ type: LOGIN_SUCCESS, data }); //发起一个action,类似于dispatch
  } catch(error) {
   yield put({ type: LOGIN_ERROR, error });
  } 
 }
}

export function* loadUserData(uid) {
 try {
  yield put({ type: USERDATA_REQUEST });
  let { data } = yield call(userRequest, `/users/${uid}`);
  yield put({ type: USERDATA_SUCCESS, data });
 } catch(error) {
  yield put({ type: USERDATA_ERROR, error });
 }
}

难点解读

对于 redux-saga, 还是有很多比较难以理解和晦涩的地方,下面笔者针对自己觉得比较容易混淆的概念进行整理:

take 的使用

take 和 takeEvery 都是监听某个 action, 但是两者的作用却不一致,takeEvery 是每次 action 触发的时候都响应,而 take 则是执行流执行到 take 语句时才响应。takeEvery 只是监听 action, 并执行相对应的处理函数,对何时执行 action 以及如何响应 action 并没有多大的控制权,被调用的任务无法控制何时被调用,并且它们也无法控制何时停止监听,它只能在每次 action 被匹配时一遍又一遍地被调用。但是 take 可以在 generator 函数中决定何时响应一个 action 以及 响应后的后续操作。
例如在监听所有类型的 action 触发时进行 logger 操作,使用 takeEvery 实现如下:

import { takeEvery } from 'redux-saga'

function* watchAndLog(getState) {
 yield* takeEvery('*', function* logger(action) {
   //do some logger operation //在回调函数体内
 })
}

使用 take 实现如下:

import { take } from 'redux-saga/effects'

function* watchAndLog(getState) {
 while(true) {
  const action = yield take('*')
  //do some logger operation //与 take 并行 
 })
}

其中 while(true) 的意思是一旦到达流程最后一步(logger),通过等待一个新的任意的 action 来启动一个新的迭代(logger 流程)。

阻塞和非阻塞

call 操作是用来发起异步操作的,对于 generator 来说,call 是阻塞的操作,它在 Generator 调用结束之前不能执行或处理任何其他事情。,但是 fork 却是非阻塞操作,当 fork 调动任务时,该任务会在后台执行,此时的执行流可以继续往后面执行而不用等待结果返回。

例如如下的登录场景:

function* loginFlow() {
 while(true) {
  const {user, password} = yield take('LOGIN_REQUEST')
  const token = yield call(authorize, user, password)
  if(token) {
   yield call(Api.storeItem({token}))
   yield take('LOGOUT')
   yield call(Api.clearItem('token'))
  }
 }
}

若在 call 在去请求 authorize 时,结果未返回,但是此时用户又触发了 LOGOUT 的 action,此时的 LOGOUT 将会被忽略而不被处理,因为 loginFlow 在 authorize 中被堵塞了,没有执行到 take('LOGOUT')那里

同时执行多个任务

如若遇到某个场景需要同一时间执行多个任务,比如 请求 users 数据 和 products 数据, 应该使用如下的方式:

import { call } from 'redux-saga/effects'
//同步执行
const [users, products] = yield [
 call(fetch, '/users'),
 call(fetch, '/products')
]

//而不是
//顺序执行
const users = yield call(fetch, '/users'),
   products = yield call(fetch, '/products')

当 yield 后面是一个数组时,那么数组里面的操作将按照 Promise.all 的执行规则来执行,genertor 会阻塞知道所有的 effects 被执行完成

源码解读

在每一个使用 redux-saga 的项目中,主文件中都会有如下一段将 sagas 中间件加入到 Store 的逻辑:

const sagaMiddleware = createSagaMiddleware({sagaMonitor})
const store = createStore(
 reducer,
 applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(rootSaga)

其中 createSagaMiddleware 是 redux-saga 核心源码文件 src/middleware.js 中导出的方法:

export default function sagaMiddlewareFactory({ context = {}, ...options } = {}) {
 ...
 
 function sagaMiddleware({ getState, dispatch }) {
  const channel = stdChannel()
  channel.put = (options.emitter || identity)(channel.put)

  sagaMiddleware.run = runSaga.bind(null, {
   context,
   channel,
   dispatch,
   getState,
   sagaMonitor,
   logger,
   onError,
   effectMiddlewares,
  })

  return next => action => {
   if (sagaMonitor && sagaMonitor.actionDispatched) {
    sagaMonitor.actionDispatched(action)
   }
   const result = next(action) // hit reducers
   channel.put(action)
   return result
  }
 }
 ...
 
 }

这段逻辑主要是执行了 sagaMiddleware(),该函数里面将 runSaga 赋值给 sagaMiddleware.run 并执行,最后返回 middleware。 接着看 runSaga() 的逻辑:

export function runSaga(options, saga, ...args) {
...
 const task = proc(
  iterator,
  channel,
  wrapSagaDispatch(dispatch),
  getState,
  context,
  { sagaMonitor, logger, onError, middleware },
  effectId,
  saga.name,
 )

 if (sagaMonitor) {
  sagaMonitor.effectResolved(effectId, task)
 }

 return task
}

这个函数里定义了返回了一个 task 对象,该 task 是由 proc 产生的,移步 proc.js:

export default function proc(
 iterator,
 stdChannel,
 dispatch = noop,
 getState = noop,
 parentContext = {},
 options = {},
 parentEffectId = 0,
 name = 'anonymous',
 cont,
) {
 ...
 const task = newTask(parentEffectId, name, iterator, cont)
 const mainTask = { name, cancel: cancelMain, isRunning: true }
 const taskQueue = forkQueue(name, mainTask, end)
 
 ...
 
 next()
 
 return task

 function next(arg, isErr){
 ...
   if (!result.done) {
    digestEffect(result.value, parentEffectId, '', next)
   } 
 ...
 }
}

其中 digestEffect 就执行了 effectTriggerd() 和 runEffect(),也就是执行 effect,其中 runEffect() 中定义了不同 effect 执行相对应的函数,每一个 effect 函数都在 proc.js 实现了。

除了一些核心方法之外,redux-saga 还提供了一系列的 helper 文件,这些文件的作用是返回一个类 iterator 的对象,便于后续的遍历和执行, 在此不具体分析。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 学习笔记(onchange等)
Nov 14 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
node.js实现快速截图
Aug 27 Javascript
解决option标签selected="selected"属性失效的问题
Nov 06 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
vue实现底部菜单功能
Jul 24 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 #Javascript
vue获取当前点击的元素并传值的实例
Mar 09 #Javascript
vue.js获得当前元素的文字信息方法
Mar 09 #Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 #Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
在vue里面设置全局变量或数据的方法
Mar 09 #Javascript
vue2 全局变量的设置方法
Mar 09 #Javascript
You might like
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python变量不能以数字打头详解
2016/07/06 Python
python自定义异常实例详解
2017/07/11 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
python实现Adapter模式实例代码
2018/02/09 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python集合的新增元素方法整理
2020/12/07 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
师范学院毕业生求职信范文
2013/12/26 职场文书
面试后的英文感谢信
2014/02/01 职场文书
交通事故协议书
2014/04/15 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
感谢信怎么写
2015/01/21 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
电力工程合作意向书
2015/05/11 职场文书