redux-saga 就是用来处理上述副作用(异步任务)的一个中间件。它是一个接收事件,并可能触发新事件的过程管理者,为你的应用管理复杂的流程。
cnpm install create-react-app -g
create-react-app zhufeng-saga-start
cd zhufeng-saga-start
cnpm i redux react-redux redux-saga tape --save
src\index.js
import store from './store';
src\store\index.js
import {createStore, applyMiddleware} from 'redux';
import reducer from './reducer';
import createSagaMiddleware from 'redux-saga';
//首先我们引入 ./sagas 模块中的 Saga。然后使用 redux-saga 模块的 createSagaMiddleware 工厂函数来创建一个 Saga middleware
import {helloSaga} from './sagas';
let sagaMiddleware = createSagaMiddleware();
//运行 helloSaga 之前,我们必须使用 applyMiddleware 将 middleware 连接至 Store。然后使用 sagaMiddleware.run(helloSaga) 运行 Saga。
let store=applyMiddleware(sagaMiddleware)(createStore)(reducer);
sagaMiddleware.run(helloSaga);
export default store;
src\store\reducer.js
export default function (state,action) {}
src\store\sagas.js
//helloSaga它只是打印了一条消息,然后退出。
export function* helloSaga() {
console.log('Hello Saga!');
}
src/components/Counter.js
import React,{Component} from 'react'
import {connect} from 'react-redux';
import actions from '../store/actions';
class Counter extends Component{
render() {
return (
<div>
<p>{this.props.number}</p>
<button onClick={this.props.incrementAsync}>+</button>
</div>
)
}
}
export default connect(
state => state,
actions
)(Counter);
src/index.js
import React from 'react'
import ReactDOM from 'react-dom';
import Counter from './components/Counter';
import {Provider} from 'react-redux';
import store from './store';
ReactDOM.render(<Provider store={store}>
<Counter/>
</Provider>,document.querySelector('#root'));
src/store/action-types.js
export const INCREMENT='INCREMENT';
export const INCREMENT_ASYNC='INCREMENT_ASYNC';
src/store/actions.js
import * as types from './action-types';
export default {
incrementAsync() {
return {type:types.INCREMENT_ASYNC}
}
}
src/store/index.js
import {createStore, applyMiddleware} from 'redux';
import reducer from './reducer';
import createSagaMiddleware from 'redux-saga';
//首先我们引入 ./sagas 模块中的 Saga。然后使用 redux-saga 模块的 createSagaMiddleware 工厂函数来创建一个 Saga middleware
import rootSaga from './sagas';
let sagaMiddleware = createSagaMiddleware();
//运行 rootSaga 之前,我们必须使用 applyMiddleware 将 middleware 连接至 Store。然后使用 sagaMiddleware.run(helloSaga) 运行 Saga。
let store=applyMiddleware(sagaMiddleware)(createStore)(reducer);
sagaMiddleware.run(rootSaga);
export default store;
src/store/reducer.js
import * as types from './action-types';
export default function (state={number:0},action) {
switch(action.type){
case types.INCREMENT:
return {number: state.number+1};
default:
return state;
}
}
src/store/sagas.js
import { delay,all,put, takeEvery } from 'redux-saga/effects'
//worker Saga: 将执行异步的 increment 任务
//incrementAsync Saga 通过 delay(1000) 延迟了 1 秒钟,然后 dispatch 一个叫 INCREMENT 的 action。
export function* incrementAsync() {
//工具函数 delay,这个函数返回一个延迟 1 秒再 resolve 的 Promise 我们将使用这个函数去 block(阻塞) Generator
//Sagas 被实现为 Generator functions,它会 yield 对象到 redux-saga middleware。 被 yield 的对象都是一类指令,指令可被 middleware 解释执行。当 middleware 取得一个 yield 后的 Promise,middleware 会暂停 Saga,直到 Promise 完成
//incrementAsync 这个 Saga 会暂停直到 delay 返回的 Promise 被 resolve,这个 Promise 将在 1 秒后 resolve
//当 middleware 拿到一个被 Saga yield 的 Effect,它会暂停 Saga,直到 Effect 执行完成,然后 Saga 会再次被恢复
yield delay(1000)
//一旦 Promise 被 resolve,middleware 会恢复 Saga 接着执行,直到遇到下一个 yield
//在这里下一个语句是另一个被 yield 的对象:调用 put({type: 'INCREMENT'}) 的结果,意思是告诉 middleware 发起一个 INCREMENT 的 action
//put 就是我们称作 Effect 的一个例子。Effects 是一些简单 Javascript 对象,包含了要被 middleware 执行的指令
yield put({ type: 'INCREMENT' })
}
//takeEvery,用于监听所有的 INCREMENT_ASYNC action,并在 action 被匹配时执行 incrementAsync 任务
export function* watchIncrementAsync() {
yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}
export function* helloSaga() {
console.log('Hello Saga!');
}
export default function* rootSaga() {
//这个 Saga yield 了一个数组,值是调用 helloSaga 和 watchIncrementAsync 两个 Saga 的结果。意思是说这两个 Generators 将会同时启动
yield all([
helloSaga(),
watchIncrementAsync()
])
}
cnpm i @babel/core @babel/node @babel/plugin-transform-modules-commonjs --save-dev
"scripts": {
"test": "babel-node src/store/sagas.spec.js --plugins @babel/plugin-transform-modules-commonjs"
}
src\utils.js
export const delay = (ms)=>{
return new Promise(function(resolve){
setTimeout(()=>{
resolve();
},ms);
});
}
src\store\sagas.spec.js
import test from 'tape';
import { all,put, takeEvery,call } from 'redux-saga/effects';
import { incrementAsync } from './sagas';
import {delay} from '../utils';
/**
* incrementAsync 是一个 Generator 函数。执行的时候返回一个 iterator object,这个 iterator 的 next 方法返回一个对象
* gen.next() // => { done: boolean, value: any }
* value 字段包含被 yield 后的表达式,也就是 yield 后面那个表达式的结果。
* done 字段指示 generator 是结束了,还是有更多的 yield 表达式
*/
test('incrementAsync Saga test', (assert) => {
const gen = incrementAsync();
assert.deepEqual(
gen.next().value,
call(delay,3000),
'incrementAsync should return a Promise that will resolve after 3 second'
)
assert.deepEqual(
gen.next().value,
put({type: 'INCREMENT'}),
'incrementAsync Saga must dispatch an INCREMENT action'
)
assert.deepEqual(
gen.next(),
{done:true,value:undefined},
'incrementAsync Saga must be done'
)
assert.end()
});
cps(fn, ...args)
创建一个 Effect 描述信息,用来命令 middleware 以 Node 风格的函数(Node style function)的方式调用 fncall(fn, ...args)
创建一个 Effect 描述信息,用来命令 middleware 以参数 args 调用函数 fncall([context, fn], ...args)
类似 call(fn, ...args),但支持传递 this 上下文给 fn,在调用对象方法时很有用apply(context, fn, [args])
call([context, fn], ...args) 的另一种写法src/store/sagas.js
import {all,put, takeEvery,call,takeLatest,cps,apply } from 'redux-saga/effects'
import {delay,read} from '../utils';
export function* readAsync() {
let content = yield cps(read,'1.txt');//cps(fn, ...args)
console.log('content=',content);
}
export function* incrementAsync() {
//工具函数 delay,这个函数返回一个延迟 1 秒再 resolve 的 Promise 我们将使用这个函数去 block(阻塞) Generator
//Sagas 被实现为 Generator functions,它会 yield 对象到 redux-saga middleware。 被 yield 的对象都是一类指令,指令可被 middleware 解释执行。当 middleware 取得一个 yield 后的 Promise,middleware 会暂停 Saga,直到 Promise 完成
//incrementAsync 这个 Saga 会暂停直到 delay 返回的 Promise 被 resolve,这个 Promise 将在 1 秒后 resolve
//put 还是 call 都不执行任何 dispatch 或异步调用,它们只是简单地返回 plain Javascript 对象
yield call(delay,3000);//call(fn, ...args)
//yield call([null,delay],3000); call([context, fn], ...args)
//yield apply(null,delay,3000); apply(context, fn, args)
//yield delay(3000);
yield put({ type: 'INCREMENT' })
}
src/store/sagas.spec.js
import test from 'tape';
import { all,put, takeEvery,call,cps,apply } from 'redux-saga/effects';
import { incrementAsync,readAsync } from './sagas';
import {delay,read} from '../utils';
test('readAsync Saga test', (assert) => {
const gen = readAsync();
assert.deepEqual(
gen.next().value,
cps(read,'1.txt'),
'readAsync should be done after 3 second'
)
assert.deepEqual(
gen.next(),
{done:true,value:undefined},
'readAsync Saga must be done'
)
assert.end();
});
src/utils.js
export function read(filename,callback){
setTimeout(function(){
console.log('read',filename);
callback(null,filename);
},1000);
}
src\store\sagas.js
export const delay2=ms => new Promise((resolve,reject) => {
setTimeout(() => {
if(Math.random()>.5){
resolve();
}else{
reject();
}
},ms);
});
export function* incrementAsync2() {
try{
yield call(delay2,3000);
yield put({ type:'INCREMENT'});
alert('操作成功');
}catch(error){
alert('操作失败');
}
}
//takeEvery,用于监听所有的 INCREMENT_ASYNC action,并在 action 被匹配时执行 incrementAsync 任务
export function* watchIncrementAsync() {
//yield takeEvery('INCREMENT_ASYNC', incrementAsync);
//只想得到最新那个请求的响应,如果已经有一个任务在执行的时候启动另一个 fetchData ,那之前的这个任务会被自动取消
yield takeLatest('INCREMENT_ASYNC', incrementAsync2);
}
export const delay3=ms => new Promise((resolve,reject) => {
setTimeout(() => {
let data = Math.random();
resolve({
code:data>.5?0:1,
data
});
},ms);
});
export function* incrementAsync3() {
let {code,data} = yield call(delay3,1000);
if(code === 0){
yield put({ type:'INCREMENT'});
alert('操作成功 data='+data);
}else{
alert('操作失败');
}
}
//takeEvery,用于监听所有的 INCREMENT_ASYNC action,并在 action 被匹配时执行 incrementAsync 任务
export function* watchIncrementAsync() {
//yield takeEvery('INCREMENT_ASYNC', incrementAsync);
//只想得到最新那个请求的响应,如果已经有一个任务在执行的时候启动另一个 fetchData ,那之前的这个任务会被自动取消
yield takeLatest('INCREMENT_ASYNC', incrementAsync3);
}
wrapper effect
src/store/sagas.js
import {all,put,take,select } from 'redux-saga/effects'
import {INCREMENT_ASYNC,INCREMENT} from './action-types';
export function* watchIncrementAsync() {
for (let i = 0; i < 3; i++) {
const action = yield take(INCREMENT_ASYNC);
console.log(action);
yield put({type:INCREMENT});
}
alert('最多只能点三次!');
}
export function* watchAndLog() {
//take 就像我们更早之前看到的 call 和 put。它创建另一个命令对象,告诉 middleware 等待一个特定的 action
//在 take 的情况中,它将会暂停 Generator 直到一个匹配的 action 被发起了
//在 takeEvery 的情况中,被调用的任务无法控制何时被调用, 它们将在每次 action 被匹配时一遍又一遍地被调用。并且它们也无法控制何时停止监听
//在 take 的情况中,控制恰恰相反。与 action 被 推向(pushed) 任务处理函数不同,Saga 是自己主动 拉取(pulling) action 的。 看起来就像是 Saga 在执行一个普通的函数调用 action = getNextAction(),这个函数将在 action 被发起时 resolve
while(true){
let action = yield take('*');
const state = yield select();
console.log('action', action);
console.log('state after', state);
}
}
export default function* rootSaga() {
yield all([
watchAndLog(),
watchIncrementAsync()
])
}
src/index.js
import React from 'react'
import ReactDOM from 'react-dom';
import Login from './components/Login';
import {Provider} from 'react-redux';
import store from './store';
ReactDOM.render(<Provider store={store}>
<Login/>
</Provider>,document.querySelector('#root'));
src/store/action-types.js
export const INCREMENT='INCREMENT';
export const INCREMENT_ASYNC='INCREMENT_ASYNC';
export const LOGIN_REQUEST='LOGIN_REQUEST';
export const LOGIN_SUCCESS='LOGIN_SUCCESS';
export const SET_USERNAME='SET_USERNAME';
export const LOGIN_ERROR='LOGIN_ERROR';
export const LOGOUT='LOGOUT';
src/store/actions.js
import * as types from './action-types';
export default {
incrementAsync() {
return {type:types.INCREMENT_ASYNC}
},
login(username,password){
return {type:types.LOGIN_REQUEST,username,password}
},
logout(){
return {type:types.LOGOUT}
}
}
src/store/reducer.js
import * as types from './action-types';
export default function (state={number:0,username:null},action) {
switch(action.type){
case types.INCREMENT:
return {number: state.number+1};
case types.LOGIN_ERROR:
return {error: action.error};
case types.SET_USERNAME:
return {username: action.username};
default:
return state;
}
}
src/store/sagas.js
import { call, all, put, take } from "redux-saga/effects";
import {LOGIN_ERROR,LOGIN_REQUEST,SET_USERNAME,LOGOUT} from "./action-types";
import Api from "../Api";
//首先我们创建了一个独立的 Generator login,它将执行真实的 API 调用并在成功后通知 Store。
function* login(username, password) {
try {
//如果 Api 调用成功了,login 将发起一个 LOGIN_SUCCESS action 然后返回获取到的 token。 如果调用导致了错误,将会发起一个 LOGIN_ERROR action。
const token = yield call(Api.login, username, password);
return token;
} catch (error) {
alert(error);
//在 login 失败的情况下,它将返回一个 undefined 值,这将导致 loginFlow 跳过当前处理进程并等待一个新的 LOGIN_REQUEST action
yield put({
type: LOGIN_ERROR,
error
});
}
}
function* loginFlow() {
//一旦到达流程最后一步(LOGOUT),通过等待一个新的 LOGIN_REQUEST action 来启动一个新的迭代
while (true) {
//loginFlow 首先等待一个 LOGIN_REQUEST action,然后调用一个 call 到 login 任务
//call 不仅可以用来调用返回 Promise 的函数。我们也可以用它来调用其他 Generator 函数
//loginFlow 将等待 login 直到它终止或返回(即执行 api 调用后,发起 action 然后返回 token 至 loginFlow)
const { username, password } = yield take(LOGIN_REQUEST);
const token = yield call(login, username, password);
//在 login 失败的情况下,它将返回一个 undefined 值,这将导致 loginFlow 跳过当前处理进程并等待一个新的 LOGIN_REQUEST action
if (token) {
yield put({
type: SET_USERNAME,
username
});
//如果调用 login 成功,loginFlow 将在 DOM storage 中存储返回的 token,并等待 LOGOUT action
Api.storeItem("token", token);
//当用户登出,我们删除存储的 token 并等待一个新的用户登录
yield take(LOGOUT);
Api.clearItem("token");
yield put({
type: SET_USERNAME,
username: null
});
}
}
}
export default function* rootSaga() {
yield all([loginFlow()]);
}
src/Api.js
export default {
login(username, password){
return new Promise(function(resolve,reject){
setTimeout(()=>{
if(Math.random()>.5){
resolve(username+'-'+password);
}else{
reject('登录失败');
}
},1000);
});
},
storeItem(key,value){
localStorage.setItem(key,value);
},
clearItem(){
localStorage.removeItem('token');
}
}
src/components/Login.js
import React,{Component} from 'react'
import {connect} from 'react-redux';
import actions from '../store/actions';
class Login extends Component{
constructor(props){
super(props);
this.username=React.createRef();
this.password=React.createRef();
}
login = (event)=>{
event.preventDefault();
let username = this.username.current.value;
let password = this.password.current.value;
this.props.login(username,password);
}
logout = (event)=>{
event.preventDefault();
this.props.logout();
}
render() {
let {username} = this.props;
let loginForm = (
<form>
<label>用户名</label><input ref={this.username}/><br/>
<label>密码</label><input ref={this.password}/><br/>
<button onClick={this.login}>登录</button>
</form>
)
let logoutForm = (
<form >
用户名:{username}<br/>
<button onClick={this.logout}>退出</button>
</form>
)
return (
username?logoutForm:loginForm
)
}
}
export default connect(
state => state,
actions
)(Login);
LOGOUT
将会被错过fork
,当我们 fork 一个 任务,任务会在后台启动,调用者也可以继续它自己的流程,而不用等待被 fork 的任务结束src/store/sagas.js
import {call,all,put,take,fork} from 'redux-saga/effects'
import {LOGIN_ERROR,LOGOUT,LOGIN_REQUEST,LOGIN_SUCCESS,SET_USERNAME} from './action-types';
import Api from '../Api'
//首先我们创建了一个独立的 Generator login,它将执行真实的 API 调用并在成功后通知 Store。
function* login(username, password) {
try {
//如果 Api 调用成功了,login 将发起一个 LOGIN_SUCCESS action 然后返回获取到的 token。 如果调用导致了错误,将会发起一个 LOGIN_ERROR action。
const token = yield call(Api.login, username, password);
yield put({type: LOGIN_SUCCESS, token});
yield put({type: SET_USERNAME, username});
//如果调用 login 成功,loginFlow 将在 DOM storage 中存储返回的 token,并等待 LOGOUT action
Api.storeItem('token',token);
} catch(error) {
//在 login 失败的情况下,它将返回一个 undefined 值,这将导致 loginFlow 跳过当前处理进程并等待一个新的 LOGIN_REQUEST action
yield put({type: LOGIN_ERROR, error});
}
}
function* loginFlow() {
//一旦到达流程最后一步(LOGOUT),通过等待一个新的 LOGIN_REQUEST action 来启动一个新的迭代
while(true) {
//loginFlow 首先等待一个 LOGIN_REQUEST action,然后调用一个 call 到 login 任务
//call 不仅可以用来调用返回 Promise 的函数。我们也可以用它来调用其他 Generator 函数
//loginFlow 将等待 login 直到它终止或返回(即执行 api 调用后,发起 action 然后返回 token 至 loginFlow)
const {username, password} = yield take(LOGIN_REQUEST);
//自从 login 的 action 在后台启动之后,我们获取不到 token 的结果,所以我们需要将 token 存储操作移到 login 任务内部
yield fork(login, username, password);
//yield take(['LOGOUT', 'LOGIN_ERROR'])。意思是监听 2 个并发的 action
//如果 login 任务在用户登出之前成功了,它将会发起一个 LOGIN_SUCCESS action 然后结束。 然后 loginFlow Saga 只会等待一个未来的 LOGOUT action 被发起
//如果 login 在用户登出之前失败了,它将会发起一个 LOGIN_ERROR action 然后结束
//如果在 login 结束之前,用户就登出了,那么 loginFlow 将收到一个 LOGOUT action 并且也会等待下一个 LOGIN_REQUEST
yield take([LOGOUT,LOGIN_ERROR]);
Api.clearItem('token');
}
}
export default function* rootSaga() {
yield all([
loginFlow()
])
}
src/components/Login.js
class Login extends Component{
render() {
let {token} = this.props;
let loginForm = (
<form>
<label>用户名</label><input ref={this.username}/><br/>
<label>密码</label><input ref={this.password}/><br/>
<button onClick={this.login}>登录</button>
+ <button onClick={this.logout}>退出</button>
</form>
)
}
}
src/store/sagas.js
import {call,all,put,take,fork,cancel,cancelled} from 'redux-saga/effects'
import {LOGIN_ERROR,LOGOUT,LOGIN_REQUEST,LOGIN_SUCCESS} from './action-types';
import Api from '../Api'
//首先我们创建了一个独立的 Generator login,它将执行真实的 API 调用并在成功后通知 Store。
function* login(username, password) {
try {
//如果 Api 调用成功了,login 将发起一个 LOGIN_SUCCESS action 然后返回获取到的 token。 如果调用导致了错误,将会发起一个 LOGIN_ERROR action。
Api.storeItem('loading','true');
const token = yield call(Api.login, username, password);
yield put({type: LOGIN_SUCCESS, token});
//如果调用 login 成功,loginFlow 将在 DOM storage 中存储返回的 token,并等待 LOGOUT action
Api.storeItem('token',token);
Api.storeItem('loading','xx');
} catch(error) {
//在 login 失败的情况下,它将返回一个 undefined 值,这将导致 loginFlow 跳过当前处理进程并等待一个新的 LOGIN_REQUEST action
yield put({type: LOGIN_ERROR, error});
Api.storeItem('loading','false');
} finally {
console.log(cancelled())
if (yield cancelled()) {
// ... put special cancellation handling code here
Api.storeItem('loading','false');
}
}
}
function* loginFlow() {
//一旦到达流程最后一步(LOGOUT),通过等待一个新的 LOGIN_REQUEST action 来启动一个新的迭代
while(true) {
//loginFlow 首先等待一个 LOGIN_REQUEST action,然后调用一个 call 到 login 任务
//call 不仅可以用来调用返回 Promise 的函数。我们也可以用它来调用其他 Generator 函数
//loginFlow 将等待 login 直到它终止或返回(即执行 api 调用后,发起 action 然后返回 token 至 loginFlow)
const {username, password} = yield take(LOGIN_REQUEST);
//自从 login 的 action 在后台启动之后,我们获取不到 token 的结果,所以我们需要将 token 存储操作移到 login 任务内部
//yield fork 的返回结果是一个 Task Object
const task = yield fork(login, username, password);
//yield take(['LOGOUT', 'LOGIN_ERROR'])。意思是监听 2 个并发的 action
//如果 login 任务在用户登出之前成功了,它将会发起一个 LOGIN_SUCCESS action 然后结束。 然后 loginFlow Saga 只会等待一个未来的 LOGOUT action 被发起
//如果 login 在用户登出之前失败了,它将会发起一个 LOGIN_ERROR action 然后结束
//如果在 login 结束之前,用户就登出了,那么 loginFlow 将收到一个 LOGOUT action 并且也会等待下一个 LOGIN_REQUEST
const action = yield take([LOGOUT,LOGIN_ERROR]);
//将task 传入给 cancel Effect。 如果任务仍在运行,它会被中止,如果任务已完成,那什么也不会发生
if(action.type == LOGOUT){
yield cancel(task);
}
Api.clearItem('token');
}
}
export default function* rootSaga() {
yield all([
loginFlow()
])
}
src/index.js
import React from 'react'
import ReactDOM from 'react-dom';
import Login from './components/Login';
import Recorder from './components/Recorder';
import {Provider} from 'react-redux';
import store from './store';
ReactDOM.render(<Provider store={store}>
<Recorder/>
</Provider>,document.querySelector('#root'));
src/store/action-types.js
export const CANCEL_TASK='CANCEL_TASK';
src/store/actions.js
stop(){
return {type:types.CANCEL_TASK}
}
src/store/sagas.js
import {call,all,put,take,race} from 'redux-saga/effects'
import {INCREMENT,CANCEL_TASK} from './action-types';
import {delay} from '../utils';
/**
* 有时候我们同时启动多个任务,但又不想等待所有任务完成,我们只希望拿到 胜利者:即第一个被 resolve(或 reject)的任务
* a=1000 b=undefined
*/
function* raceFlow() {
const {a, b} = yield race({
a: call(delay, 1000),
b: call(delay, 2000)
});
console.log('a='+a,'b='+b);
}
//每隔一秒钟让数字加1
function* start() {
while(true){
yield call(delay,1000);
yield put({type:INCREMENT});
}
}
//race 的另一个有用的功能是,它会自动取消那些失败的 Effects
function* recorder() {
yield race({
start: call(start),
stop: take(CANCEL_TASK)
});
}
export default function* rootSaga() {
//yield all([raceFlow()])
yield all([recorder()])
}
src/components/Counter.js
import React,{Component} from 'react'
import {connect} from 'react-redux';
import actions from '../store/actions';
class Counter extends Component{
render() {
return (
<div>
<p>{this.props.number}</p>
<button onClick={this.props.stop}>停止</button>
</div>
)
}
}
export default connect(
state => state,
actions
)(Counter);