Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 15, 2016 07:29
Show Gist options
  • Save anonymous/a145356eb3d8c4d2966939d42554c6dd to your computer and use it in GitHub Desktop.
Save anonymous/a145356eb3d8c4d2966939d42554c6dd to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/valuqebiya
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/redux@^3.5.2/dist/redux.min.js"></script>
<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
<script src="https://unpkg.com/redux-observable/dist/redux-observable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/vue-rx.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<vue-ping/>
</div>
<script id="jsbin-javascript">
/**
* IMPORTANT ***************************************************************
*
* This example uses the global version of RxJS that includes ALL operators.
* Inside your app, you will likely need to import the operators you use or
* import all of them in your index.js entry file.
*
* Learn more about this: http://goo.gl/4ZlYeC
*/
'use strict';
console.clear();
// redux/modules/ping.js
var PING = 'PING';
var PONG = 'PONG';
var _ping = function _ping() {
return { type: PING };
};
var pingEpic = function pingEpic(action$) {
return action$.ofType(PING).delay(1000) // Asynchronously wait 1000ms then continue
.mapTo({ type: PONG });
};
var pingReducer = function pingReducer(state, action) {
if (state === undefined) state = { isPinging: false };
switch (action.type) {
case PING:
return { isPinging: true };
case PONG:
return { isPinging: false };
default:
return state;
}
};
// redux/store
var _Redux = Redux;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var _ReduxObservable = ReduxObservable;
var createEpicMiddleware = _ReduxObservable.createEpicMiddleware;
var epicMiddleware = createEpicMiddleware(pingEpic);
var store = createStore(pingReducer, applyMiddleware(epicMiddleware));
// vue/component.js
Vue.component('vue-ping', {
template: '\n <div>\n <h1>is pinging: {{ isPinging }}</h1>\n <button @click="ping">Start PING</button>\n </div>\n ',
methods: {
ping: function ping() {
store.dispatch(_ping());
}
},
subscriptions: function subscriptions() {
return {
isPinging: Rx.Observable.from(store).map(function (state) {
return state.isPinging;
})
};
}
});
// vue/app.js
new Vue({ el: '#app' });
</script>
<script id="jsbin-source-javascript" type="text/javascript">/**
* IMPORTANT ***************************************************************
*
* This example uses the global version of RxJS that includes ALL operators.
* Inside your app, you will likely need to import the operators you use or
* import all of them in your index.js entry file.
*
* Learn more about this: http://goo.gl/4ZlYeC
*/
console.clear();
// redux/modules/ping.js
const PING = 'PING';
const PONG = 'PONG';
const ping = () => ({ type: PING });
const pingEpic = action$ =>
action$.ofType(PING)
.delay(1000) // Asynchronously wait 1000ms then continue
.mapTo({ type: PONG });
const pingReducer = (state = { isPinging: false }, action) => {
switch (action.type) {
case PING:
return { isPinging: true };
case PONG:
return { isPinging: false };
default:
return state;
}
};
// redux/store
const { createStore, applyMiddleware } = Redux;
const { createEpicMiddleware } = ReduxObservable;
const epicMiddleware = createEpicMiddleware(pingEpic);
const store = createStore(pingReducer,
applyMiddleware(epicMiddleware)
);
// vue/component.js
Vue.component('vue-ping', {
template:`
<div>
<h1>is pinging: {{ isPinging }}</h1>
<button @click="ping">Start PING</button>
</div>
`,
methods: {
ping: function(){
store.dispatch(ping());
}
},
subscriptions(){
return {
isPinging: Rx.Observable.from(store)
.map( state => state.isPinging )
};
}
});
// vue/app.js
new Vue({el: '#app'});</script></body>
</html>
Raw
jsbin.valuqebiya.js
/**
* IMPORTANT ***************************************************************
*
* This example uses the global version of RxJS that includes ALL operators.
* Inside your app, you will likely need to import the operators you use or
* import all of them in your index.js entry file.
*
* Learn more about this: http://goo.gl/4ZlYeC
*/
'use strict';
console.clear();
// redux/modules/ping.js
var PING = 'PING';
var PONG = 'PONG';
var _ping = function _ping() {
return { type: PING };
};
var pingEpic = function pingEpic(action$) {
return action$.ofType(PING).delay(1000) // Asynchronously wait 1000ms then continue
.mapTo({ type: PONG });
};
var pingReducer = function pingReducer(state, action) {
if (state === undefined) state = { isPinging: false };
switch (action.type) {
case PING:
return { isPinging: true };
case PONG:
return { isPinging: false };
default:
return state;
}
};
// redux/store
var _Redux = Redux;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var _ReduxObservable = ReduxObservable;
var createEpicMiddleware = _ReduxObservable.createEpicMiddleware;
var epicMiddleware = createEpicMiddleware(pingEpic);
var store = createStore(pingReducer, applyMiddleware(epicMiddleware));
// vue/component.js
Vue.component('vue-ping', {
template: '\n <div>\n <h1>is pinging: {{ isPinging }}</h1>\n <button @click="ping">Start PING</button>\n </div>\n ',
methods: {
ping: function ping() {
store.dispatch(_ping());
}
},
subscriptions: function subscriptions() {
return {
isPinging: Rx.Observable.from(store).map(function (state) {
return state.isPinging;
})
};
}
});
// vue/app.js
new Vue({ el: '#app' });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment