博客
关于我
从 generator 函数 到 redux -saga (五)
阅读量:111 次
发布时间:2019-02-26

本文共 1961 字,大约阅读时间需要 6 分钟。

redux-saga 中的api 介绍

import { delay } from 'redux-saga';

import { all, call ,put, takeEvery ,fork,takeLatest ,apply,select,take ,cancel} from "redux-saga/effects";

delay 等待时间 接受一个毫秒值为参数 用例:

delay(1000);

all 同时启动多个saga 用例:

yield all([        login(),        watchIncrementAsync() ])

call apply 执行调用接口等异步操作 传参方式不一样   类比原生js中的call apply 用例:

  let token = yield call(service.home.login,username,password);  let token = yield apply(service.home,service.home.login,[username,password]);

put 类比redux中的dispatch 用例:

 

 yield put({type:types.LOGIN_SUCCESS,token});

takeEvery takeEvery 的作用是每次put 动作执行的的时候 都去调用worker   允许多个任务 实例同时启动,用例:

yield takeEvery(types.LOGIN_REQUEST,function*({type,username,password}:Login){        try{            const state = yield select();                   let token = yield call(service.home.login,username,password);            yield put({type:types.LOGIN_SUCCESS,token});            yield put(push('/logout'));            return token;         }catch(error){            put({type:types.LOGIN_ERROR,error});         }  });

takeLatest 只允许一个任务在执行。并且这个任务是最后被启动的那个。用例:

yield takeLatest(types.LOGIN_REQUEST,function*({type,username,password}:Login){        try{            const state = yield select();                   let token = yield call(service.home.login,username,password);            yield put({type:types.LOGIN_SUCCESS,token});            yield put(push('/logout'));            return token;         }catch(error){            put({type:types.LOGIN_ERROR,error});         }  });

fork 的作用是启动一个新的task,不阻塞原task执行 用例:

yield fork(login,username,password);

cancel 的作用是取消 fork 任务 用例:

if(action.type === 'LOGOUT')      yield cancel(task)

select 相当于redux中的getstate 用例:

const state = yield select()

take 可以看成一个订阅者 监听指定的action用例:

yield take(types.LOGIN_REQUEST);

所有的东西都必须被封装在 sagas 中。sagas 包含3个部分,用于联合执行任务:

worker saga

做所有的工作,如调用 API,进行异步请求,并且获得返回结果
watcher saga
监听被 dispatch 的 actions,当接收到 action 或者知道其被触发时,调用 worker saga 执行任务
root saga
立即启动 sagas 的唯一入口
 

转载地址:http://mvcz.baihongyu.com/

你可能感兴趣的文章
Nginx入门简介和反向代理、负载均衡、动静分离理解
查看>>
nginx入门篇----nginx服务器基础配置
查看>>
vue中参数传不到后台去怎么办?
查看>>
nginx反向代理
查看>>
Nginx反向代理
查看>>
nginx反向代理、文件批量改名及统计ip访问量等精髓总结
查看>>
Nginx反向代理与正向代理配置
查看>>
Nginx反向代理及负载均衡实现过程部署
查看>>
Nginx反向代理和负载均衡部署指南
查看>>
Nginx反向代理是什么意思?如何配置Nginx反向代理?
查看>>
nginx反向代理解决跨域问题
查看>>
nginx反向代理解决跨域问题,使本地调试更方便
查看>>
nginx反向代理转发、正则、重写、负摘均衡配置案例
查看>>
Nginx反向代理配置
查看>>
Nginx启动SSL功能,并进行功能优化,你看这个就足够了
查看>>
nginx启动脚本
查看>>
Nginx和Tomcat的区别
查看>>
Nginx在Windows上和Linux上(Docker启动)分别配置基本身份认证示例
查看>>
Nginx在Windows下载安装启动与配置前后端请求代理
查看>>
Nginx在开发中常用的基础命令
查看>>