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 ...
随机推荐
- XML语言学习随笔
XML和HTML都是W3C的定制的标准,XML的诞生本身是为了替代不成熟的HTML,但是因为现实的环境,XML替代HTML并未成功.之后W3C为了代码严谨性的决心,又发布了升级版的标记语言XHTML, ...
- Salesforce服务云简介
服务云简介 Salesforce的服务云(Service Cloud)是专注于客服和呼叫中心解决方案的子系统.它是Salesforce核心CRM系统的一部分. 服务云特性 服务云提供了客户服务和呼叫中 ...
- Use Slim to overview model in Tensorflow like model.summary() in Keras
model.summary() in Tensorflow like Keras Use Slim Example: import numpy as np from tensorflow.python ...
- .NET中资源文件的使用
工作需要,为VB.NET WinForm程序提供一个中英文界面切换功能,大方向有三个ini.XML.资源文件. 首先ini太过时,坚决不打算用.资源文件和XML相比提供了一个资源文件管理器,编写键值对 ...
- system.transfer.list深度解析
system.transfer.list system.new.dat 很明显,通过名字我们就知道这两个文件的作用,system.new.dat为数据部分,system.transfer.list为 ...
- PHP开发APP接口学习笔记
习要点概述1.APP接口简介 2.封装通信接口方法 3.核心技术 4.APP接口实例 服务器和客户端进行接口数据通信:服务器 -->数据库|缓存 -->调用接口 -->客户端 服务器 ...
- SpringBoot整合定时任务
定时任务一般是项目中都需要用到的,可以用于定时处理一些特殊的任务. 在SpirngBoot中使用定时任务变的特别简单,不需要再像SpringMVC一样写很多的配置,只需要在启动类上增加一个@Enabl ...
- python接口测试—post请求(二)
使用post请求登陆小极客网. 1.获取登陆接口,及用户名和密码参数 进入小极客网,先注册个账户,修改用户名和密码,然后点击登陆,打开debug调试-进入到network下 输入用户名和密码,点击登陆 ...
- 关于使用WeUI在IE中提示“font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。”的问题
@font-face是css3中定义字体的规则. 首先,在使用weui时,在Chrome.Firefox下没有问题,但是在IE下提示“font-face 未能完成 OpenType 嵌入权限检查.权限 ...
- CSS图片水平垂直居中
Html: <div id="></img></div> </div> CSS: #MainContent { display:table-c ...