redux-saga Example

Simple timeout example

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/redux-saga@0.10.5/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>
<script src="https://rawgit.com/krasimir/kuker-emitters/faab106c4d6ccd244df7a66cc92807f7ae1a76bf/standalone/ReduxSagaEmitter.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} = ReduxSaga.effects;

//============
// Reducer
//============
const defaultState = {
    isLoading: false,
    lastTimestamp: undefined,
    count: 0,
};
const reducer = (state = defaultState, action) => {
    console.info(action.type);
    switch (action.type) {
        case 'REQUEST_LOAD':        
            return {
                ...state,
                isLoading: true,
            }
        case 'RECEIVE_LOAD':
            return {
                ...state,
                ...action.payload,
                count: state.count + 1,
                isLoading: false,
            }
        default:
            return state;
    }
};

//============
// Actions
//============
function requestLoad() {
	console.info('requestLoad() is executed');
    return {
        type: 'REQUEST_LOAD',
    };
}

function receiveLoad(timestamp) {
    return {
        type: 'RECEIVE_LOAD',
        payload: {
            lastTimestamp: timestamp,
        }
    }
}

// Side Effect Action Function (REMOVED!!)
/*
function startLoad() {
    return (dispatch, getState) => {
        dispatch(requestLoad()); // Sub action
        loadApi()
        .then(timestamp => dispatch(receiveLoad(timestamp))); // Sub action
    }
}
*/

//============
// APIs
//============
function loadApi() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(new Date().getTime());
        }, 3000);
    });
}
function remoteAPI() {
	return new Promise(resolve => {
  	setTimeout(() => {
    	resolve({ answer: 42 });
    }, 1000);
  })
}

//================
// Saga (Monitor)
//================
function* loadData() {
  const result = yield call(remoteAPI, { getAnswer: true });
  yield put({ type: 'ANSWER', value: result.answer });
}
function* watchLoadRequest() {
		yield* loadData();
   ...