Skip to content

Instantly share code, notes, and snippets.

@arv25

arv25/events.js

Last active March 9, 2018 00:35
Show Gist options
  • Save arv25/4440a55e332a8f3f3686066f75bd903d to your computer and use it in GitHub Desktop.
Save arv25/4440a55e332a8f3f3686066f75bd903d to your computer and use it in GitHub Desktop.
Download ZIP
Events with Redux Spike
Raw
events.js
// Events with Redux Spike
// ES6
//event name helpers
var eventNameCounter = 0;
const nextEventName = () => {
eventNameCounter = eventNameCounter + 1;
return "foo-".concat(eventNameCounter).concat(" ");
}
//Redux code (state and reducer)
const initialState = { events: [],
eventsCount: 0,
sending: []};
const reducer = (state = initialState, action) => {
switch (action.type){
case 'ADD_EVENT':
console.log("adding event");
return Object.assign({}, state, {
events: [...state.events, nextEventName()],
eventsCount: state.eventsCount + 1
});
case 'SEND_EVENT':
console.log("sending event");
return Object.assign({}, state, {
events: [],
eventsCount: 0,
sending: state.events
});
case 'RECEIVE_SUCCESS':
console.log("receiving succeeded");
return Object.assign({}, state, {
sending: []
});
case 'RECEIVE_FAIL':
console.log("receiving failed");
return Object.assign({}, state, {
events: [...state.sending, ...state.events],
eventsCount: state.eventsCount + state.sending.length,
sending: []
});
default:
return state;
}
}
const { createStore } = Redux;
const store = createStore(reducer);
// React specific code to dispatch/subscribe to app-state.
const StateDisplay = ({
value,
onAddEvent,
onSendEvent,
onReceiveSuccess,
onReceiveFail
}) => (
<div>
<h3>{value[0]}</h3>
<h3>{value[1]}</h3>
<h3>{value[2]}</h3>
<button onClick={onAddEvent}>Add Event</button>
<button onClick={onSendEvent}>Send to Server</button>
<button onClick={onReceiveSuccess}>Response 200</button>
<button onClick={onReceiveFail}>Response non-200</button>
</div>
);
const render = () => {
ReactDOM.render(
<StateDisplay
value={[
["events: [", store.getState().events, "]"],
["eventsCount: ", store.getState().eventsCount],
["sending: [", store.getState().sending,"]"]
]
}
onAddEvent={() =>
store.dispatch({
type: 'ADD_EVENT'
})
}
onSendEvent={() =>
store.dispatch({
type: 'SEND_EVENT'
})
}
onReceiveSuccess={() =>
store.dispatch({
type: 'RECEIVE_SUCCESS'
})
}
onReceiveFail={() =>
store.dispatch({
type: 'RECEIVE_FAIL'
})
}
/>,
document.getElementById('root')
);
};
store.subscribe(render);
render();
// simulate activity
const eventGenerator = () => {
window.setInterval( () => { store.dispatch({ type: 'ADD_EVENT'}) }, 1500 );
};
const sendToServerRegularly = () => {
let serverSend = () => {
store.dispatch({ type: 'SEND_EVENT' });
if (Math.random() > 0.5) {
window.setTimeout(() => { store.dispatch({ type: 'RECEIVE_SUCCESS' }) },
1500);
} else {
window.setTimeout(() => { store.dispatch({ type: 'RECEIVE_FAIL' }) },
2000);
}
};
window.setInterval(serverSend, 5000);
};
const runApp = () => {
eventGenerator();
sendToServerRegularly();
};
//runApp();
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://wzrd.in/standalone/expect@latest"></script>
<script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script>
<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script src="events.js"></script>
</head>
<body>
<div id='root'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment