redux-saga Example

Simple timeout example

by findango

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>
<script>
function stringify(value) {
	return typeof value === 'object'
    	? JSON.stringify(value, null, 2)
        : value;
}

function log() {
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById('output').innerHTML += args.map(stringify).join(" ") + "\n";
}
</script>

<pre id="output"></pre>

SCSS

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

JavaScript 1.7

const {createStore, applyMiddleware} = Redux;
const createSagaMiddleware = ReduxSaga.default;
const {takeEvery, delay} = ReduxSaga;
const {take, put, call} = ReduxSaga.effects;

//============
// Reducer
//============
const reducer = (state = {}, action) => state;

//================
// Saga (Monitor)
//================
let dimTask = null;

function* handlePreload() {
	log('Preloading...');
	const dims = yield getDimensions();
    printDims(dims);
}

function* handleInitApp() {
	log('Initing app...');
	yield delay(2000);
	const dims = yield getDimensions();
    printDims(dims);
}

function* watchLoadRequest() {
    yield [
    	takeEvery('PRELOAD', handlePreload),
		takeEvery('INIT_APP', handleInitApp),
    ];
}

function printDims(dims) {
	log(dims);
}

function getDimensions() {
	log('Getting dimensions...');
	if (dimTask) {
  	    log('Second time should come here');
  		return dimTask;
  	}
  
    log('First time should come here');
	dimTask = new Promise((resolve, reject) => {
  	    resolve(['foo']);
    });
  	return dimTask;
}

//============
// Store 
//============
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
    reducer,
	applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(watchLoadRequest);

// dispatch both actions
store.dispatch({
	type: 'INIT_APP',
});

store.dispatch({
	type: 'PRELOAD',
});