Redux-saga学习笔记
概述
Redux-saga在Redux应用中扮演’中间件’的角色,主要用来执行数据流中的异步操作。主要通过ES6中的generator函数和yield关键字来以同步的方式实现异步操作。
基本用法:
- 使用createSagaMiddleware方法创建saga 的Middleware,然后在创建的redux的store时,使用applyMiddleware函数将创建的saga Middleware实例绑定到store上,最后可以调用saga Middleware的run函数来执行某个或者某些Middleware。
- 在saga的Middleware中,可以使用takeEvery或者takeLatest等API来监听某个action,当某个action触发后,saga可以使用call、fetch等api发起异步操作,操作完成后使用put函数触发action,同步更新state,从而完成整个State的更新。
API
- takeEvery
用来监听action,每个action都触发一次,如果其对应是异步操作的话,每次都发起异步请求,而不论上次的请求是否返回。
1
2
3
4
5
|
import { takeEvery } from 'redux-saga/effects' function * watchFetchData() { yield takeEvery( 'FETCH_REQUESTED' , fetchData) } |
- takeLatest
作用同takeEvery一样,唯一的区别是它只关注最后,也就是最近一次发起的异步请求,如果上次请求还未返回,则会被取消。
1
2
3
|
function * watchFetchData() { yield takeLatest( 'FETCH_REQUESTED' , fetchData) } |
- call
call用来调用异步函数,将异步函数和函数参数作为call函数的参数传入,返回一个js对象。saga引入他的主要作用是方便测试,同时也能让我们的代码更加规范化。
同js原生的call一样,call函数也可以指定this对象,只要把this对象当第一个参数传入call方法就好了
saga同样提供apply函数,作用同call一样,参数形式同js原生apply方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import { call } from 'redux-saga/effects' function * fetchProducts() { const products = yield call(Api.fetch, '/products' ) // ... } import { call } from 'redux-saga/effects' import Api from '...' const iterator = fetchProducts() // expects a call instruction assert.deepEqual( iterator.next().value, call(Api.fetch, '/products' ), "fetchProducts should yield an Effect call(Api.fetch, './products')" ) yield call([obj, obj.method], arg1, arg2, ...) yield apply(obj, obj.method, [arg1, arg2, ...]) |
- cps
同call方法基本一样,但是用处不太一样,call一般用来完成异步操作,cps可以用来完成耗时比较长的io操作等。
- put
put是saga对Redux中dispatch方法的一个封装,调用put方法后,saga内部会分发action通知Store更新state。
这个借口主要也是为了方便我们写单元测试提供的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
import { call, put } from 'redux-saga/effects' // ... function * fetchProducts() { const products = yield call(Api.fetch, '/products' ) // create and yield a dispatch Effect yield put({ type: 'PRODUCTS_RECEIVED' , products }) } const products = {} // expects a dispatch instruction assert.deepEqual( iterator.next(products).value, put({ type: 'PRODUCTS_RECEIVED' , products }), "fetchProducts should yield an Effect put({ type: 'PRODUCTS_RECEIVED', products })" ) |
- 请求失败
有两种方式来处理请求失败的情况,一种是使用try-catch方法,将错误抛出;另一种是使用变量缓存成功失败的状态。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
import Api from './path/to/api' import { call, put } from 'redux-saga/effects' // ... function * fetchProducts() { try { const products = yield call(Api.fetch, '/products' ) yield put({ type: 'PRODUCTS_RECEIVED' , products }) } catch (error) { yield put({ type: 'PRODUCTS_REQUEST_FAILED' , error }) } } import Api from './path/to/api' import { call, put } from 'redux-saga/effects' function fetchProductsApi() { return Api.fetch( '/products' ) .then(response => ({ response })) . catch (error => ({ error })) } function * fetchProducts() { const { response, error } = yield call(fetchProductsApi) if (response) yield put({ type: 'PRODUCTS_RECEIVED' , products: response }) else yield put({ type: 'PRODUCTS_REQUEST_FAILED' , error }) } |
- take
take的表现同takeEvery一样,都是监听某个action,但与takeEvery不同的是,他不是每次action触发的时候都相应,而只是在执行顺序执行到take语句时才会相应action。
当在genetator中使用take语句等待action时,generator被阻塞,等待action被分发,然后继续往下执行。
takeEvery只是监听每个action,然后执行处理函数。对于何时相应action和 如何相应action,takeEvery并没有控制权。
而take则不一样,我们可以在generator函数中决定何时相应一个action,以及一个action被触发后做什么操作。
最大区别:take只有在执行流达到时才会响应对应的action,而takeEvery则一经注册,都会响应action。
1
2
3
4
5
6
7
8
|
import { take, put } from 'redux-saga/effects' function * watchFirstThreeTodosCreation() { for ( let i = 0; i < 3; i++) { const action = yield take( 'TODO_CREATED' ) } yield put({type: 'SHOW_CONGRATULATION' }) } |
- fork
非阻塞任务调用机制:上面我们介绍过call可以用来发起异步操作,但是相对于generator函数来说,call操作是阻塞的,只有等promise回来后才能继续执行,而fork是非阻塞的 ,当调用fork启动一个任务时,该任务在后台继续执行,从而使得我们的执行流能继续往下执行而不必一定要等待返回。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
import { take, call, put, cancelled } from 'redux-saga/effects' import Api from '...' function * authorize(user, password) { try { const token = yield call(Api.authorize, user, password) yield put({type: 'LOGIN_SUCCESS' , token}) yield call(Api.storeItem, {token}) return token } catch (error) { yield put({type: 'LOGIN_ERROR' , error}) } finally { if ( yield cancelled()) { // ... put special cancellation handling code here } } } |
- cancel
cancel的作用是用来取消一个还未返回的fork任务。防止fork的任务等待时间太长或者其他逻辑错误。
- all
all提供了一种并行执行异步请求的方式。之前介绍过执行异步请求的api中,大都是阻塞执行,只有当一个call操作放回后,才能执行下一个call操作, call提供了一种类似Promise中的all操作,可以将多个异步操作作为参数参入all函数中,如果有一个call操作失败或者所有call操作都成功返回,则本次all操作执行完毕。
1
2
3
4
5
6
7
|
import { all, call } from 'redux-saga/effects' // correct, effects will get executed in parallel const [users, repos] = yield all([ call(fetch, '/users' ), call(fetch, '/repos' ) ]) |
- race
有时候当我们并行的发起多个异步操作时,我们并不一定需要等待所有操作完成,而只需要有一个操作完成就可以继续执行流。这就是race借口的用处。他可以并行的启动多个异步请求,只要有一个 请求返回(resolved或者reject),race操作接受正常返回的请求,并且将剩余的请求取消。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import { race, take, put } from 'redux-saga/effects' function * backgroundTask() { while ( true ) { ... } } function * watchStartBackgroundTask() { while ( true ) { yield take( 'START_BACKGROUND_TASK' ) yield race({ task: call(backgroundTask), cancel: take( 'CANCEL_TASK' ) }) } } |
- actionChannel
在之前的操作中,所有的action分发是顺序的,但是对action的响应是由异步任务来完成,也即是说对action的处理是无序的。
如果需要对action的有序处理的话,可以使用actionChannel函数来创建一个action的缓存队列,但一个action的任务流程处理完成后,才可是执行下一个任务流。
代码参考:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import { take, actionChannel, call, ... } from 'redux-saga/effects' function * watchRequests() { // 1- Create a channel for request actions const requestChan = yield actionChannel( 'REQUEST' ) while ( true ) { // 2- take from the channel const {payload} = yield take(requestChan) // 3- Note that we're using a blocking call yield call(handleRequest, payload) } } function * handleRequest(payload) { ... } |
- eventChannel
-
Throttling
用来防止连续不断的响应某个事件。
1
2
3
4
5
6
7
8
9
|
import { throttle } from 'redux-saga/effects' function * handleInput(input) { // ... } function * watchInput() { yield throttle(500, 'INPUT_CHANGED' , handleInput) } |
-
Debouncing
延时执行,使用delay函数实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import { delay } from 'redux-saga' function * handleInput(input) { // debounce by 500ms yield call(delay, 500) ... } function * watchInput() { let task while ( true ) { const { input } = yield take( 'INPUT_CHANGED' ) if (task) { yield cancel(task) } task = yield fork(handleInput, input) } } const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)) |
参考:https://redux-saga.js.org/docs/api/