[React] 14 - Redux: Redux Saga
Ref: 聊一聊 redux 异步流之 redux-saga [入门]
Ref: 从redux-thunk到redux-saga实践 [深入]
Ref: Saga中文文档
函数式编程范式的“副作用”
在实际的应用开发中,我们希望做一些异步的(如Ajax请求)且不纯粹的操作(如改变外部的状态),这些在函数式编程范式中被称为“副作用”。
Redux 的作者将这些副作用的处理通过提供中间件的方式让开发者自行选择进行实现。
redux-saga 就是用来处理上述副作用(异步任务)的一个中间件。
它是一个接收事件,并可能触发新事件的过程管理者,为你的应用管理复杂的流程。
参考:[React] 12 - Redux: async & middleware
需求:"假如当每次 Button 被点击的时候,我们想要从给定的 url 中获取数据"
redux-thunk 的主要思想是扩展 action,使得 action 从一个对象变成一个函数。
采用 redux-thunk, 我们会这样写:
// fetchUrl 返回一个 thunk
function fetchUrl(url) {
return (dispatch) => {
dispatch({
type: 'FETCH_REQUEST'
}); fetch(url).then(data => dispatch({
type: 'FETCH_SUCCESS',
data
}));
}
} // 如果 thunk 中间件正在运行的话,我们可以 dispatch 上述函数如下:
dispatch(
fetchUrl(url)
):
redux-thunk 的缺点
(2)thunks 内部测试逻辑比较困难,需要mock所有的触发函数;
(3)协调并发任务比较困难,当自己的 action 调用了别人的 action,别人的 action 发生改动,则需要自己主动修改;
(4)业务逻辑会散布在不同的地方:启动的模块,组件以及thunks内部。
// redux-thunk example
import {applyMiddleware, createStore} from 'redux';
import axios from 'axios';
import thunk from 'redux-thunk'; const initialState = { fetching: false, fetched: false, users: [], error: null }
const reducer = (state = initialState, action) => {
switch(action.type) {
case 'FETCH_USERS_START': {
return {...state, fetching: true}
break;
}
case 'FETCH_USERS_ERROR': {
return {...state, fetching: false, error: action.payload}
break;
}
case 'RECEIVE_USERS': {
return {...state, fetching: false, fetched: true, users: action.payload}
break;
}
}
return state;
}
const middleware = applyMiddleware(thunk); // store.dispatch({type: 'FOO'});
// redux-thunk 的作用即是将 action: object --> function
store.dispatch((dispatch) => {
dispatch({type: 'FETCH_USERS_START'});
// do something async
axios.get('http://rest.learncode.academy/api/wstern/users')
.then((response) => {
dispatch({type: 'RECEIVE_USERS', payload: response.data})
})
.catch((err) => {
dispatch({type: 'FECTH_USERS_ERROR', payload: err})
})
});
Saga来了

yield
Effects(包含指令的文本对象)。effects对象的API
例如: fork
,call
,take
,put
,cancel
等来创建 Effect。// Effect -> 调用 fetch 函数并传递 `./products` 作为参数
{
type: CALL,
function: fetch,
args: ['./products']
}
第二,
dispatch
一个 action 来通知在 UI 中哪些地方发生了改变,- worker saga
做所有的工作,如调用 API,进行异步请求,并且获得返回结果 - watcher saga
监听被 dispatch 的 actions,当接收到 action 或者知道其被触发时,调用 worker saga 执行任务 - root saga
立即启动 sagas 的唯一入口
在 redux-saga 中的基本概念就是:
call
),但是会构造一个需要执行作用的描述。如何使用Saga
1. 加入 saga 中间件,并且启动它,它会一直运行
//...
import { createStore, applyMiddleware} from 'redux';
import createSagaMiddleware from 'redux-saga';
import appReducer from './reducers';
//... const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware]; const store = createStore(appReducer, applyMiddleware(...middlewares));
sagaMiddleware.run(rootSaga); render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
);
2. 在 sagas 文件夹中集中写 saga 文件
import { take, fork, call, put } from 'redux-saga/effects'; // jeff: 都是纯函数,每个函数构造一个特殊的对象
// The worker: perform the requested task
function* fetchUrl(url) {
const data = yield call(fetch, url); // 指示中间件调用 fetch 异步任务 jeff: data是一个类似于{type: CALL, function: fetchUrl, args: [url]}
的对象
/**
* 中间件会停止 generator 函数,
* 直到fetch
返回的Promise
被 resolved(或 rejected)
*/
yield put({ type: 'FETCH_SUCCESS', data }); // 指示中间件发起一个 action 到 Store
} ------------------------------------------------------------ // The watcher: watch actions and coordinate worker tasks
function* watchFetchRequests() {
while(true) {
const action = yield take('FETCH_REQUEST'); // 指示中间件等待 Store 上指定的 action,即监听 action
/**
* 中间件会暂停执行wacthFetchRequests
generator 函数,
* 直到FETCH_REQUEST
action 被 dispatch。
*/
yield fork(fetchUrl, action.url); // 指示中间件以无阻塞调用方式执行 fetchUrl
/**
* 告诉中间件去无阻塞调用一个新的fetchUrl
任务,* action.url
作为fetchUrl
函数的参数传递。
*/
}
}
总结领悟:
JavaScript 是单线程的,redux-saga
让事情看起来是同时进行的。
架构上的优势:
将所有的异步流程控制都移入到了 sagas,UI 组件不用执行业务逻辑,只需 dispatch action 就行,增强组件复用性。
结合具体使用场景:登录
export function* loginSaga() {
while(true) {
const { user, pass } = yield take(LOGIN_REQUEST) //等待 Store 上指定的 action LOGIN_REQUEST
try {
let { data } = yield call(request.post, '/login', { 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(request.get, `/users/${uid}`);
yield put({ type: USERDATA_SUCCESS, data });
} catch(error) {
yield put({ type: USERDATA_ERROR, error });
}
}
提出一个问题:
Firebase提供的登录接口为何使用起来简单许多,而以上这些方案却相对复杂了许多?
[React] 14 - Redux: Redux Saga的更多相关文章
- Flux --> Redux --> Redux React 入门
本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...
- React,关于redux的一点小见解
最近项目做多页面应用使用到了,react + webpack + redux + antd去构建多页面的应用,本地开发用express去模拟服务端程序(个人觉得可以换成dva).所以在这里吐槽一下我自 ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- [React] 11 - Redux: redux
Ref: Redux中文文档 Ref: React 讀書會 - B團 - Level 19 Redux 深入淺出 Ref: React+Redux 分享會 Ruan Yifeng, Redux 架构: ...
- Flux --> Redux --> Redux React 基础实例教程
本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...
- react系列(五)在React中使用Redux
上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...
- Flux --> Redux --> Redux React 入门 基础实例使用
本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...
- [RN] React Native 使用 Redux 比较详细和深刻的教程
React Native 使用 Redux 比较详细和深刻的教程 React Native 使用 Redux https://www.jianshu.com/p/06fc18cef56a http:/ ...
- React Hooks +React Context vs Redux
React Hooks +React Context vs Redux https://blog.logrocket.com/use-hooks-and-context-not-react-and-r ...
随机推荐
- J-Link GDB Server Command
J-Link GDB Server - SEGGER Hilden, Germany – September 15th, 2011 – SEGGER Microcontroller today ann ...
- ERROR: While executing gem … (Gem::RemoteFetcher::FetchError)
原文地址:https://www.zfanw.com/blog/error-while-executing-gem-gem-remote-fetch-error.html 我对命令行下安装 gem 包 ...
- Go 语言环境搭建
本文内容 概述 Go SDK LiteIDE 参考资料 2009年Google推出了它的第二个开源语言 Go.对 Go 的评价褒贬不一,中国比国外的热情高.Go 天生就是为并发和网络而生的,除了这点外 ...
- Oracle表被锁无法问题处理
1:查出锁定表的信息SELECT s.sid, s.serial#, s.username, s.schemaname, s.osuser, s.process, s.machine,s.termin ...
- hive列转行
一.问题 hive如何将 a b a b a b c d c d c d 变为: a b ,, c d ,, 二.数据 test.txt cat column_row.txt a,b, a,b, a, ...
- Python根据多个空格Split字符串
下面的String: 1 沪1 上海市 1850 1350 400 1300 1186/1644(嘉定约100,松江69 奉贤68 2007年上海常住人口1858万人,户籍人口1378.86万人,来沪 ...
- Javascript框架的自定义事件(转)
很多 javascript 框架都提供了自定义事件(custom events),例如 jquery.yui 以及 dojo 都支持“document ready”事件.而部分自定义事件是源自回调(c ...
- iOS开源项目之日志框架CocoaLumberjack
CocoaLumberjack是Mac和iOS上一个集快捷.简单.强大和灵活于一身的日志框架.CocoaLumberjack类似于流行的日志框架(如log4j),但它是专为Objective-C设计的 ...
- MySQL 四种事务隔离级的说明[转]
很早之前写的文章,重新回顾和学习下: 按照SQL:1992 事务隔离级别,InnoDB默认是可重复读的(REPEATABLE READ).MySQL/InnoDB 提供SQL标准所描述的所有四个事务隔 ...
- KMP算法——从入门到懵逼到了解
本博文參考http://blog.csdn.net/v_july_v/article/details/7041827 关于其它字符串匹配算法见http://blog.csdn.net/WINCOL/a ...