Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title>Redux rocket launcher example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
<script src="https://npmcdn.com/redux-saga@0.9.1/dist/redux-saga.js"></script>
</head>
<body>
<p>
Example created to compare Redux + redux-saga implementation with
<a href="http://jdubray.github.io/sam/" target="_blank">SAM</a> implementation
<br>
SAM implementation can be found <a href="https://bitbucket.org/snippets/jdubray/9dgKp/sam-sample" target="_blank">here</a>
</p>
<hr>
<div id="app"></div>
<script>
"use strict"
const extend = (state, ext) => Object.assign({}, state, ext)
//////////////////////////////////////////////////////////////////////////
//
// Reducers
//
const COUNTER_MAX = 10 ;
var initialState = {
counter: COUNTER_MAX,
started: false,
launched: false,
aborted: false
}
function reducer(state, action) {
if(state === undefined)
return initialState
switch (action.type) {
case 'START':
return extend(initialState, { counter: COUNTER_MAX, started: true })
case 'DECREMENT':
return extend(state, { counter: state.counter - 1 })
case 'ABORT':
return extend(state, { started: false, aborted: true })
case 'LAUNCH':
return extend(state, { started: false, launched: true })
default:
return state
}
}
//////////////////////////////////////////////////////////////////////////
//
// Sagas
//
const io = ReduxSaga.effects
const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
function* rocketLauncherSaga() {
yield io.take('START')
for(let i = 0; i < COUNTER_MAX; i++) {
const winner = yield io.race({
decrement: io.call(delay, 1000),
abort : io.take('ABORT')
})
if(winner.abort)
return
yield io.put({type: 'DECREMENT'})
}
yield io.put({type: 'LAUNCH'})
}
//////////////////////////////////////////////////////////////////////////
//
// View
//
const renderCounting = (model) => (`
<p>Counter ${model.started ? "down" : ""} : ${model.counter}</p>
<form onSubmit="JavaScript:return actions.${model.started ? "abort()" : "start()"};">
<input type="submit" value="${model.started ? "Abort" : "Start"}">
</form>
`)
const renderAborted = (model) => `<p>Aborted at Counter: ${model.counter}</p>`
const renderLaunched = (model) => (`<p>Launched</p>`)
const renderMain = (model) => (
model.launched ? renderLaunched(model)
: model.aborted ? renderAborted(model)
: renderCounting(model)
)
////////////////////////////////////////////////////////////////
//
// actions
//
const formAction = type => {
store.dispatch({type: type})
return false
}
const actions = {
start: () => formAction('START'),
abort: () => formAction('ABORT')
}
////////////////////////////////////////////////////////////////
//
// Setup
//
const createSagaMiddleware = ReduxSaga.default
var store = Redux.createStore(
reducer,
Redux.applyMiddleware(createSagaMiddleware(rocketLauncherSaga))
)
var el = document.getElementById("app");
function display() {
el.innerHTML = renderMain(store.getState())
}
store.subscribe(() => display())
display()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment