React-redux-saga
概述:
react-saga有3个重要的函数:call ,put takeEvery。
- call:在worker saga里执行异步函数;
- put:异步函数有结果的时候,派发action;
- takeEvery:当监听到aciton时,执行worker saga。
saga主要用到的是generator。
使用:
新建sagas.js
import { takeEvery , put} from 'redux-saga/effects'
import axios from 'axios';
import { GET_INIT_LIST } from './actionType';
import { initListAction} from './actionCreator';
//worker saga
function* todolist() {
//异步获取数据
try{
const res = yield axios.get('api/list');
const action=initListAction(res.data);
yield put(action);
}catch(e){
console.log('list.json 网络请求失败')
}
}
//当type为GET_INIT_LIST的action触发时,调用todolist函数
function* mySaga() {
yield takeEvery(GET_INIT_LIST, todolist);
} export default mySaga;
创建store的时候,按照文档配置好redux-saga
import { createStore, applyMiddleware ,compose} from 'redux';
import reducer from './reducer'
import createSagaMiddleware from 'redux-saga'
import mySaga from './sagas'
//1.创建中间件
const sagaMiddleware = createSagaMiddleware();
//2.应用中间件
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware));
const store = createStore(reducer, enhancer);
//3.执行run
sagaMiddleware.run(mySaga)
export default store;
组件里还是和之前一样
componentDidMount(){
const action=getInitListAction();
store.dispatch(action);
}
React-redux-saga的更多相关文章
- [React] 14 - Redux: Redux Saga
Ref: Build Real App with React #14: Redux Saga Ref: 聊一聊 redux 异步流之 redux-saga [入门] Ref: 从redux-thun ...
- react native redux saga增加日志功能
redux-logger地址:https://github.com/evgenyrodionov/redux-logger 目前Reac native项目中已经使用redux功能,异步中间件使用red ...
- react系列(六)Redux Saga
在Redux中常要管理异步操作,目前社区流行的有Redux-Saga.Redux-thunk等.在管理复杂应用时,推荐使用Redux-Saga,它提供了用 generator 书写类同步代码的能力. ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- 重写官方TodoList,对于初学react+redux的人来说,很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
随机推荐
- IE9获取file控件的本地文件路径
最近发现,在IE9下,公司网站的本地图片预览都无法正常显示,经过测试发现,原因在于IE9下无法获取file控件的文件路径. 以前的代码如下: var strPic = fileImg.value; i ...
- 如今领占主导地位的19种AI技术!
如今领占主导地位的19种AI技术! http://blog.itpub.net/31542119/viewspace-2212797/ 深度学习的突破将人工智能带进全新阶段. 2006 年-2015 ...
- 测试思想 QA的价值体现
QA的价值体现 by:授客 QQ:1033553122 1. 缺陷挖掘价值 QA人员一个很重要的价值就是在尽可能短的时间内找出尽可能多的缺陷. 某种意义上说,缺陷直观的反应了产品的质量,QA发现的有 ...
- Android手势密码--设置和校验
private void setGesturePassword() { toggleMore.setOnCheckedChangeListener(new CompoundButton.OnCheck ...
- typescritp 导出默认接口
假如有ITest.ts文件,如下: export default interface ITest{ } 这样会报错,编译不通过.据说是设计成这样的,具体详细见:https://github.com/M ...
- Appium初识
一. Appium工作原理 基本工作流程如下: Appium提供了一套web服务,Appium起一个Server(4723端口),用于与脚本client通信. server接收web driver(即 ...
- CSS| 框模型-margin
CSS margin 属性 设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做 ...
- 关掉 ubuntu bug 报告功能
想关掉这个: 通过服务加配置文件关掉
- 针对需要使用T3协议的Weblogic2628漏洞解决方案
针对需要使用T3协议的Weblogic2628漏洞解决方案 前几天用户的服务器中检查到了Weblogic2628l漏洞,并且打过Oracle官方补丁后还是能检测到. 针对此问题,去网上查找了一些资料. ...
- 原生JS添加类名 删除类名
为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle&quo ...