redux-saga 就是用来处理上述副作用(异步任务)的一个中间件。它是一个接收事件,并可能触发新事件的过程管理者,为你的应用管理复杂的流程。
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\sagas.js
import {put,take} from 'redux-saga/effects';
import * as types from './action-types';
export default function* rootSaga() {
for (let i=0;i<3;i++){
yield take(types.ASYNC_ADD);
yield put({type:types.ADD});
}
console.log('已经达到最大值');
}
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.add}>+</button>
</div>
)
}
}
export default connect(
state => state,
actions
)(Counter);
src/store/index.js
import {createStore, applyMiddleware} from 'redux';
import reducer from './reducer';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';
let sagaMiddleware=createSagaMiddleware();
let store=applyMiddleware(sagaMiddleware)(createStore)(reducer);
sagaMiddleware.run(rootSaga);
window.store=store;
export default store;
src/store/actions.js
import * as types from './action-types';
const actions = {
add() {
return {type:types.ASYNC_ADD}
}
}
export default actions
src/store/action-types.js
export const ASYNC_ADD='ASYNC_ADD';
export const ADD='ADD';
src/store/reducer.js
import * as types from './action-types';
export default function reducer(state={number:0},action) {
switch(action.type){
case types.ADD:
return {number: state.number+1};
default:
return state;
}
}
src\redux-saga\effectTypes.js
export const TAKE = 'TAKE';
export const PUT = 'PUT';
src\redux-saga\effects.js
import * as effectTypes from './effectTypes'
export function take(actionType) {
return { type: effectTypes.TAKE, actionType}
}
export function put(action) {
return { type: effectTypes.PUT, action }
}
src\redux-saga\channel.js
export default function stdChannel() {
let currentTakers = [];
function take(actionType,taker) {
taker.actionType = actionType;
taker.cancel = () => {
currentTakers = currentTakers.filter(item => item !== taker);
}
currentTakers.push(taker);
}
function put(action) {
currentTakers.forEach(taker => {
if (taker.actionType === action.type) {
taker.cancel();
taker(action);
}
});
}
return { take, put };
}
src\redux-saga\runSaga.js
import * as effectTypes from './effectTypes'
export default function runSaga(env, saga) {
let { channel, dispatch } = env;
let it = saga();
function next(value) {
let {value:effect,done} = it.next(value);
if (!done) {
switch (effect.type) {
case effectTypes.TAKE:
channel.take(effect.actionType,next);
break;
case effectTypes.PUT:
dispatch(effect.action);
next();
break;
default:
break;
}
}
}
next();
}
redux-saga/index.js
import stdChannel from './channel';
import runSaga from './runSaga';
export default function createSagaMiddleware() {
const channel = stdChannel();
let boundRunSaga;
function sagaMiddleware({getState,dispatch}) {
boundRunSaga=runSaga.bind(null,{channel,dispatch,getState});
return function (next) {
return function (action) {
const result = next(action);
channel.put(action);
return result;
}
}
}
sagaMiddleware.run = (saga)=>boundRunSaga(saga);
return sagaMiddleware;
}
import { put, take } from '../redux-saga/effects';
import * as types from './action-types';
+export function* add() {
+ yield put({ type: types.ADD });
+}
export default function* rootSaga() {
for (let i = 0; i < 3; i++) {
yield take(types.ASYNC_ADD);
+ yield add();
}
console.log('已经达到最大值');
}
src\redux-saga\runSaga.js
import * as effectTypes from './effectTypes'
export default function runSaga(env, saga) {
let { channel, dispatch } = env;
+ let it = typeof saga == 'function' ? saga() : saga;
function next(value) {
let { value: effect, done } = it.next(value);
if (!done) {
+ if (typeof effect[Symbol.iterator] == 'function') {
+ runSaga(env,effect);
+ next();
+ } else {
switch (effect.type) {
case effectTypes.TAKE:
channel.take(effect.actionType, next);
break;
case effectTypes.PUT:
dispatch(effect.action);
next();
break;
default:
break;
}
}
}
}
next();
}
+import { put, takeEvery } from '../redux-saga/effects';
import * as actionTypes from './action-types';
export function* add() {
yield put({ type: actionTypes.ADD });
}
export default function* rootSaga() {
+ yield takeEvery(actionTypes.ASYNC_ADD,add);
}
src\redux-saga\effectTypes.js
export const TAKE = 'TAKE';
export const PUT = 'PUT';
+export const FORK = 'FORK';
src\redux-saga\effects.js
import * as effectTypes from './effectTypes'
export function take(actionType) {
return { type: effectTypes.TAKE, actionType }
}
export function put(action) {
return { type: effectTypes.PUT, action }
}
+export function fork(saga) {
+ return { type: effectTypes.FORK, saga };
+}
+export function takeEvery(pattern, saga) {
+ function* takeEveryHelper() {
+ while (true) {
+ yield take(pattern);
+ yield fork(saga);
+ }
+ }
+ return fork(takeEveryHelper);
+}
src\redux-saga\runSaga.js
import * as effectTypes from './effectTypes'
export default function runSaga(env, saga) {
let { channel, dispatch } = env;
let it = typeof saga == 'function' ? saga() : saga;
function next(value) {
let { value: effect, done } = it.next(value);
if (!done) {
if (typeof effect[Symbol.iterator] == 'function') {
runSaga(env,effect);
next();
} else {
switch (effect.type) {
case effectTypes.TAKE:
channel.take(effect.actionType, next);
break;
case effectTypes.PUT:
dispatch(effect.action);
next();
break;
+ case effectTypes.FORK:
+ runSaga(env,effect.saga);
+ next();
+ break;
default:
break;
}
}
}
}
next();
}
import { put, takeEvery } from '../redux-saga/effects';
import * as actionTypes from './action-types';
+const delay = ms => new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve();
+ }, ms);
+});
export function* add() {
+ yield delay(1000);
yield put({ type: actionTypes.ADD });
}
export default function* rootSaga() {
yield takeEvery(actionTypes.ASYNC_ADD, add);
}
import * as effectTypes from './effectTypes'
export default function runSaga(env, saga) {
let { channel, dispatch } = env;
let it = typeof saga == 'function' ? saga() : saga;
function next(value) {
let { value: effect, done } = it.next(value);
if (!done) {
if (typeof effect[Symbol.iterator] == 'function') {
runSaga(env,effect);
next();
+ }else if(effect.then){
+ effect.then(next);
+ } else {
switch (effect.type) {
case effectTypes.TAKE:
channel.take(effect.actionType, next);
break;
case effectTypes.PUT:
dispatch(effect.action);
next();
break;
case effectTypes.FORK:
runSaga(env,effect.saga);
next();
break;
default:
break;
}
}
}
}
next();
}
src\store\sagas.js
+import { put, takeEvery,call } from '../redux-saga/effects';
import * as actionTypes from './action-types';
const delay = ms => new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, ms);
});
export function* add() {
+ yield call(delay,1000);
yield put({ type: actionTypes.ADD });
}
export default function* rootSaga() {
yield takeEvery(actionTypes.ASYNC_ADD, add);
}
src\redux-saga\effectTypes.js
export const TAKE = 'TAKE';
export const PUT = 'PUT';
export const FORK = 'FORK';
+export const CALL = 'CALL';
src\redux-saga\effects.js
import * as effectTypes from './effectTypes'
export function take(actionType) {
return { type: effectTypes.TAKE, actionType }
}
export function put(action) {
return { type: effectTypes.PUT, action }
}
export function fork(saga) {
return { type: effectTypes.FORK, saga };
}
export function takeEvery(pattern, saga) {
function* takeEveryHelper() {
while (true) {
yield take(pattern);
yield fork(saga);
}
}
return fork(takeEveryHelper);
}
+export function call(fn, ...args) {
+ return { type: effectTypes.CALL, fn, args };
+}
src\redux-saga\runSaga.js
import * as effectTypes from './effectTypes'
export default function runSaga(env, saga) {
let { channel, dispatch } = env;
let it = typeof saga == 'function' ? saga() : saga;
function next(value) {
let { value: effect, done } = it.next(value);
if (!done) {
if (typeof effect[Symbol.iterator] == 'function') {
runSaga(env,effect);
next();
}else if(effect.then){
effect.then(next);
} else {
switch (effect.type) {
case effectTypes.TAKE:
channel.take(effect.actionType, next);
break;
case effectTypes.PUT:
dispatch(effect.action);
next();
break;
case effectTypes.FORK:
runSaga(env,effect.saga);
next();
break;
+ case effectTypes.CALL:
+ effect.fn(...effect.args).then(next);
+ break;
default:
break;
}
}
}
}
next();
}
src\store\sagas.js
+import { put, takeEvery,call,cps} from '../redux-saga/effects';
import * as actionTypes from './action-types';
+const delay = (ms,callback)=>{
+ setTimeout(() => {
+ callback(null,'ok');
+ },ms);
+}
export function* add() {
+ let data = yield cps(delay,1000);
+ console.log(data);
yield put({ type: actionTypes.ADD });
}
export default function* rootSaga() {
yield takeEvery(actionTypes.ASYNC_ADD, add);
}
src\redux-saga\effectTypes.js
export const TAKE = 'TAKE';
export const PUT = 'PUT';
export const FORK = 'FORK';
export const CALL = 'CALL';
+export const CPS = 'CPS';
src\redux-saga\effects.js
import * as effectTypes from './effectTypes'
export function take(actionType) {
return { type: effectTypes.TAKE, actionType }
}
export function put(action) {
return { type: effectTypes.PUT, action }
}
export function fork(saga) {
return { type: effectTypes.FORK, saga };
}
export function takeEvery(pattern, saga) {
function* takeEveryHelper() {
while (true) {
yield take(pattern);
yield fork(saga);
}
}
return fork(takeEveryHelper);
}
export function call(fn, ...args) {
return { type: effectTypes.CALL, fn, args };
}
+export function cps(fn, ...args) {
+ return { type: effectTypes.CPS, fn, args };
+}
src\redux-saga\runSaga.js
import * as effectTypes from './effectTypes'
export default function runSaga(env, saga) {
let { channel, dispatch } = env;
let it = typeof saga == 'function' ? saga() : saga;
+ function next(value,isErr) {
+ let result;
+ if (isErr) {
+ result = it.throw(value);
+ } else {
+ result = it.next(value);
+ }
+ let { value: effect, done } = result;
if (!done) {
if (typeof effect[Symbol.iterator] == 'function') {
runSaga(env,effect);
next();
}else if(effect.then){
effect.then(next);
} else {
switch (effect.type) {
case effectTypes.TAKE:
channel.take(effect.actionType, next);
break;
case effectTypes.PUT:
dispatch(effect.action);
next();
break;
case effectTypes.FORK:
runSaga(env,effect.saga);
next();
break;
case effectTypes.CALL:
effect.fn(...effect.args).then(next);
break;
+ case effectTypes.CPS:
+ effect.fn(...effect.args,(err,data)=>{
+ if(err){
+ next(err,true);
+ }else{
+ next(data);
+ }
+ });
+ break;
default:
break;
}
}
}
}
next();
}
src\store\sagas.js
import { put, takeEvery, call, cps, take,all } from '../redux-saga/effects';
import * as actionTypes from './action-types';
+export function* add1() {
+ for (let i = 0; i < 3; i++) {
+ yield take(actionTypes.ASYNC_ADD);
+ yield put({ type: actionTypes.ADD });
+ }
+ return 'add1';
+}
+export function* add2() {
+ for (let i = 0; i < 3; i++) {
+ yield take(actionTypes.ASYNC_ADD);
+ yield put({ type: actionTypes.ADD });
+ }
+ return 'add2';
+}
export default function* rootSaga() {
+ let result = yield all([add1(), add2()]);
+ console.log('done', result);
}
src\redux-saga\effectTypes.js
export const TAKE = 'TAKE';
export const PUT = 'PUT';
export const FORK = 'FORK';
export const CALL = 'CALL';
export const CPS = 'CPS';
export const ALL = 'ALL';
src\redux-saga\effects.js
import * as effectTypes from './effectTypes'
export function take(actionType) {
return { type: effectTypes.TAKE, actionType }
}
export function put(action) {
return { type: effectTypes.PUT, action }
}
export function fork(saga) {
return { type: effectTypes.FORK, saga };
}
export function takeEvery(pattern, saga) {
function* takeEveryHelper() {
while (true) {
yield take(pattern);
yield fork(saga);
}
}
return fork(takeEveryHelper);
}
export function call(fn, ...args) {
return { type: effectTypes.CALL, fn, args };
}
export function cps(fn, ...args) {
return { type: effectTypes.CPS, fn, args };
}
+export function all(effects) {
+ return { type: effectTypes.ALL, effects };
+}
src\redux-saga\runSaga.js
import * as effectTypes from './effectTypes'
+export default function runSaga(env, saga,callback) {
let { channel, dispatch } = env;
let it = typeof saga == 'function' ? saga() : saga;
function next(value, isErr) {
let result;
if (isErr) {
result = it.throw(value);
} else {
result = it.next(value);
}
let { value: effect, done } = result;
if (!done) {
if (typeof effect[Symbol.iterator] == 'function') {
runSaga(env, effect);
next();
} else if (effect.then) {
effect.then(next);
} else {
switch (effect.type) {
case effectTypes.TAKE:
channel.take(effect.actionType, next);
break;
case effectTypes.PUT:
dispatch(effect.action);
next();
break;
case effectTypes.FORK:
runSaga(env, effect.saga);
next();
break;
case effectTypes.CALL:
effect.fn(...effect.args).then(next);
break;
case effectTypes.CPS:
effect.fn(...effect.args, (err, data) => {
if (err) {
next(err, true);
} else {
next(data);
}
});
break;
+ case effectTypes.ALL:
+ let effects=effect.effects;
+ let result = [];
+ let complete=0;
+ effects.forEach((effect,index)=>runSaga(env,effect,(res)=>{
+ result[index]=res;
+ if(++complete === effects.length)
+ next(result);
+ }));
+ break;
default:
break;
}
}
} else {
+ callback && callback(effect);
}
}
next();
}
src\store\sagas.js
+import { put, takeEvery, call, cps, all, take, cancel, fork, delay } from '../redux-saga/effects';
+import * as actionTypes from './action-types';
+export function* add() {
+ while (true) {
+ yield delay(1000);
+ yield put({ type: actionTypes.ADD });
+ }
+}
+export function* addWatcher() {
+ const task = yield fork(add);
+ console.log(task);
+ yield take(actionTypes.STOP_ADD);
+ yield cancel(task);
+}
+export default function* rootSaga() {
+ yield addWatcher();
+}
src\redux-saga\effectTypes.js
export const TAKE = 'TAKE';
export const PUT = 'PUT';
export const FORK = 'FORK';
export const CALL = 'CALL';
export const CPS = 'CPS';
export const ALL = 'ALL';
+export const CANCEL = 'CANCEL';
src\redux-saga\effects.js
import * as effectTypes from './effectTypes'
export function take(actionType) {
return { type: effectTypes.TAKE, actionType }
}
export function put(action) {
return { type: effectTypes.PUT, action }
}
export function fork(saga) {
return { type: effectTypes.FORK, saga };
}
export function takeEvery(pattern, saga) {
function* takeEveryHelper() {
while (true) {
yield take(pattern);
yield fork(saga);
}
}
return fork(takeEveryHelper);
}
export function call(fn, ...args) {
return { type: effectTypes.CALL, fn, args };
}
export function cps(fn, ...args) {
return { type: effectTypes.CPS, fn, args };
}
export function all(effects) {
return { type: effectTypes.ALL, effects };
}
+export function cancel(task) {
+ return { type: effectTypes.CANCEL, task };
+}
+export default function delayP(ms, val = true) {
+ const promise = new Promise(resolve => {
+ setTimeout(resolve, ms, val);
+ })
+ return promise
+}
+export const delay = call.bind(null, delayP);
src\redux-saga\symbols.js
export const TASK_CANCEL = Symbol('TASK_CANCEL');
src\redux-saga\runSaga.js
import * as effectTypes from './effectTypes';
+import {TASK_CANCEL} from './symbols';
export default function runSaga(env, saga,callback) {
+ let task = {cancel:()=>next(TASK_CANCEL)};
let { channel, dispatch } = env;
let it = typeof saga == 'function' ? saga() : saga;
function next(value, isErr) {
let result;
if (isErr) {
result = it.throw(value);
+ }else if(value === TASK_CANCEL){
+ result = it.return(value);
} else {
result = it.next(value);
}
let { value: effect, done } = result;
if (!done) {
if (typeof effect[Symbol.iterator] == 'function') {
runSaga(env, effect);
next();
} else if (effect.then) {
effect.then(next);
} else {
switch (effect.type) {
case effectTypes.TAKE:
channel.take(effect.actionType, next);
break;
case effectTypes.PUT:
dispatch(effect.action);
next();
break;
case effectTypes.FORK:
+ let forkTask = runSaga(env, effect.saga);
+ next(forkTask);
break;
case effectTypes.CALL:
effect.fn(...effect.args).then(next);
break;
case effectTypes.CPS:
effect.fn(...effect.args, (err, data) => {
if (err) {
next(err, true);
} else {
next(data);
}
});
break;
case effectTypes.ALL:
let effects=effect.effects;
let result = [];
let complete=0;
effects.forEach((effect,index)=>runSaga(env,effect,(res)=>{
result[index]=res;
if(++complete === effects.length)
next(result);
}));
break;
+ case effectTypes.CANCEL:
+ effect.task.cancel();
+ next();
+ break;
default:
break;
}
}
} else {
callback && callback(effect);
}
}
next();
+ return task;
}
src\store\action-types.js
export const ASYNC_ADD='ASYNC_ADD';
export const ADD='ADD';
+export const STOP_ADD='STOP_ADD';
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}>stop</button>
</div>
)
}
}
export default connect(
state => state,
actions
)(Counter);
src\store\actions.js
import * as actionTypes from './action-types';
const actions = {
add() {
return { type: actionTypes.ASYNC_ADD }
},
+ stop() {
+ return { type: actionTypes.STOP_ADD }
+ }
}
export default actions