redux-saga 範例一:暖身

按下按鈕，1.5秒後改變一次，僅跑一次 使用基本的take/select/put/call

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="container11">
    <!-- 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} = ReduxSaga.effects;

//============
// Reducer
//============
const defaultState = {
    color: 'yellow',
    count: 0,
};
const reducer = (state = defaultState, action) => {
    console.info(action.type);
    switch (action.type) {
        case 'SET_COLOR':        
            return {
                ...state,
                color: action.payload,
            }
        case 'BUTTON_COUNT':
            return {
                ...state,
                count: state.count + 1
            }
        default:
            return state;
    }
};

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

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

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

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

function* colorFlow() {
	yield take('BUTTON_COUNT');
	let lastColor = yield select(state => state.color);
  console.log('原本的顏色是', lastColor);
	let color = yield getColorApi();
  //相當於 put({type:'SET_COLOR', payload:color})
    yield put(setColor(color));
}

//============
// Components
//============
const mapStateToProps = (state = {}) => {
    return {...state};
};
let Container = connect(mapStateToProps)(React.createClass({
    render: function () {
        const {count, dispatch, color} = this.props;
        return (
            <div>
                <div...