redux-saga 範例二:阻塞式還是非組塞式

使用fork 在sagaMiddleware.run()切換colorFlow和colorFlowNonBlock

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<link rel="stylesheet" href="https://my.stackla.com/media/components/stackla-uikit/dist/uikit.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/redux-saga.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.9.1/polyfill.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

SCSS

.indicator {
  font-size: 36px;
  height: 50px;
  margin-bottom: 10px;
}

JavaScript 1.7

const {Provider, connect} = ReactRedux;
const {createStore, applyMiddleware} = Redux;
const createSagaMiddleware = ReduxSaga.default;
const {takeEvery} = ReduxSaga;
const {take, put, call, select, fork, spawn} = ReduxSaga.effects;

//============
// Reducer
//============
const defaultState = {
    color0: 'yellow',
    color1: 'red',
    color2: 'blue',
    count: 0,
};
const reducer = (state = defaultState, action) => {
    console.info(action.type);
    switch (action.type) {
        case 'SET_COLOR':  
        	let colorPos = 'color'+action.payload.pos;
            let newState = {...state};
            newState[colorPos] = action.payload.color;
            return newState
        case 'BUTTON_COUNT':
            return {
                ...state,
                count: state.count + 1
            }
        default:
            return state;
    }
};

//============
// Actions
//============
function setColor(color, pos) {
    return {
        type: 'SET_COLOR',
        payload: {color, pos}
    };
}

function buttonCount() {
    return {
        type: 'BUTTON_COUNT',
        payload: ''
    }
}

//============
// APIs
//============
const colors = ['red', 'blue', 'green', 'orange', 'gray', 'black', 'darkolivegreen', 'purple', 'pink','saddlebrown','darkmagenta']
function getColorApi() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
        		let randomColor = colors[Math.floor(Math.random()*colors.length)]
            resolve(randomColor);
        }, 1500);
    });
}

//================
// Saga (Monitor)
//================

//註冊saga動作
function* rootFlow(){
	while (true) {
		//yield colorFlow();
		yield colorFlowFork();
		//yield colorFlowSpawn();
  	console.log('動作完成')
   }
}

function* colorFlow() {
  //take會回傳符合type的action 
  yield take('BUTTON_COUNT');
  	for(let i=0; i<3; i++){
  	yield call(setColorGenerator, i)
  }
}

/* 放入 sagaMiddleware.run()*/
function* colorFlowFork() {
  //take會回傳符合type的action 
  yield...