Skip to content

Instantly share code, notes, and snippets.

@aminpaks

aminpaks/index.html

Created August 29, 2017 23:11
Show Gist options
  • Save aminpaks/32543ae8affc7195f7ce77c0af0bb6f3 to your computer and use it in GitHub Desktop.
Save aminpaks/32543ae8affc7195f7ce77c0af0bb6f3 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/yubihedava
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/redux@^3.5.2/dist/redux.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-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>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="root"></div>
<script id="jsbin-javascript">
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
console.clear();
var AnimalActions = {
CREATE: 'CREATE'
};
var Whatever = (function () {
function Whatever() {
_classCallCheck(this, Whatever);
this.actions = {
createSuccess: function createSuccess() {
return { type: 'CREATE_SUCCESS' };
},
createFail: function createFail(errors) {
return { type: 'CREATE_FAIL', errors: errors };
}
};
this.service = {
create: function create() {
return Rx.Observable.of({
json: function json() {
return { success: 0, whatever: 'whatever' };
}
});
}
};
}
_createClass(Whatever, [{
key: 'createAnimalActionChain',
value: function createAnimalActionChain() {
var _this = this;
return function (action$) {
return action$.ofType(AnimalActions.CREATE).switchMap(function (action) {
return _this.service.create(action.payload).map(function (httpResponse) {
var response = httpResponse.json();
if (response.success) {
return _this.actions.createSuccess();
}
return _this.actions.createFail(response.errors);
});
});
};
}
}]);
return Whatever;
})();
var reducer = function reducer(state, action) {
console.log(action);
document.write(action.type + '<br>');
};
// redux/configureStore.js
var _ReactRedux = ReactRedux;
var Provider = _ReactRedux.Provider;
var _Redux = Redux;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var _ReduxObservable = ReduxObservable;
var createEpicMiddleware = _ReduxObservable.createEpicMiddleware;
var whatever = new Whatever();
var epicMiddleware = createEpicMiddleware(whatever.createAnimalActionChain());
var store = createStore(reducer, applyMiddleware(epicMiddleware));
store.dispatch({ type: AnimalActions.CREATE, payload: 'create-payload' });
</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear();
const AnimalActions = {
CREATE: 'CREATE'
};
class Whatever {
actions = {
createSuccess: () => ({ type: 'CREATE_SUCCESS' }),
createFail: errors => ({ type: 'CREATE_FAIL', errors })
};
service = {
create: () => Rx.Observable.of({
json: () => ({ success: 0, whatever: 'whatever' }),
})
};
createAnimalActionChain() {
return action$ => {
return action$
.ofType(AnimalActions.CREATE)
.switchMap(action => {
return this.service
.create(action.payload)
.map(httpResponse => {
let response = httpResponse.json()
if (response.success) {
return this.actions.createSuccess()
}
return this.actions.createFail(response.errors)
})
})
}
}
}
const reducer = (state, action) => {
console.log(action);
document.write(action.type + '<br>');
};
// redux/configureStore.js
const { Provider } = ReactRedux;
const { createStore, applyMiddleware } = Redux;
const { createEpicMiddleware } = ReduxObservable;
const whatever = new Whatever();
const epicMiddleware = createEpicMiddleware(whatever.createAnimalActionChain());
const store = createStore(reducer,
applyMiddleware(epicMiddleware)
);
store.dispatch({ type: AnimalActions.CREATE, payload: 'create-payload' });
</script></body>
</html>
Raw
jsbin.yubihedava.js
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
console.clear();
var AnimalActions = {
CREATE: 'CREATE'
};
var Whatever = (function () {
function Whatever() {
_classCallCheck(this, Whatever);
this.actions = {
createSuccess: function createSuccess() {
return { type: 'CREATE_SUCCESS' };
},
createFail: function createFail(errors) {
return { type: 'CREATE_FAIL', errors: errors };
}
};
this.service = {
create: function create() {
return Rx.Observable.of({
json: function json() {
return { success: 0, whatever: 'whatever' };
}
});
}
};
}
_createClass(Whatever, [{
key: 'createAnimalActionChain',
value: function createAnimalActionChain() {
var _this = this;
return function (action$) {
return action$.ofType(AnimalActions.CREATE).switchMap(function (action) {
return _this.service.create(action.payload).map(function (httpResponse) {
var response = httpResponse.json();
if (response.success) {
return _this.actions.createSuccess();
}
return _this.actions.createFail(response.errors);
});
});
};
}
}]);
return Whatever;
})();
var reducer = function reducer(state, action) {
console.log(action);
document.write(action.type + '<br>');
};
// redux/configureStore.js
var _ReactRedux = ReactRedux;
var Provider = _ReactRedux.Provider;
var _Redux = Redux;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var _ReduxObservable = ReduxObservable;
var createEpicMiddleware = _ReduxObservable.createEpicMiddleware;
var whatever = new Whatever();
var epicMiddleware = createEpicMiddleware(whatever.createAnimalActionChain());
var store = createStore(reducer, applyMiddleware(epicMiddleware));
store.dispatch({ type: AnimalActions.CREATE, payload: 'create-payload' });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment