Skip to content

Instantly share code, notes, and snippets.

@wyze

wyze/esnextbin.md

Created March 9, 2016 18:46
Show Gist options
  • Save wyze/b502436196935571205d to your computer and use it in GitHub Desktop.
Save wyze/b502436196935571205d to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
</head>
<body>
<div id="app"></div>
</body>
</html>
Raw
index.js
import 'whatwg-fetch'
import { applyMiddleware, createStore } from 'redux'
import { debounce, mapValues } from 'lodash'
import { isFSA } from 'flux-standard-action'
import React from 'react'
import ReactDOM from 'react-dom'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
// Action
const action = () => {
const thunk = dispatch =>
fetch('http://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(
json => {
dispatch({
payload: json,
type: 'LOAD_SUCCESS'
})
}
)
thunk.meta = { debounce: 'load', notFSA: true }
return thunk
}
// Reducer
const users = ( state = [], action = {} ) => {
switch ( action.type ) {
case 'LOAD_SUCCESS':
return action.payload
default:
return state
}
}
// Debounce middleware
const debounceMiddleware = ( config = {} ) => () => next => {
const debouncers = mapValues(config, option => {
if ( typeof option === 'number' ) {
return debounce(next, option)
}
const { wait = 0, ...options } = option
return debounce(next, wait, options)
})
return action => {
const { meta = {} } = action
if ( !meta.notFSA && !isFSA(action) ) {
return next(action)
}
const debouncer = debouncers[meta.debounce]
if ( debouncer ) {
return debouncer(action)
}
return next(action)
}
}
// Middlewares
const middleware = [
debounceMiddleware({
load: 2000
}),
thunk,
logger({ collapsed: true })
]
// App
const store = createStore(users, applyMiddleware(...middleware))
const rootEl = document.getElementById('app')
function render() {
ReactDOM.render((
<pre>
{JSON.stringify(store.getState(), null, 2)}
</pre>
), rootEl)
}
render()
store.subscribe(render)
store.dispatch(action())
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"whatwg-fetch": "0.11.0",
"redux": "3.3.1",
"lodash": "4.3.0",
"flux-standard-action": "0.6.1",
"react": "0.14.7",
"react-dom": "0.14.7",
"redux-logger": "2.6.1",
"redux-thunk": "2.0.1",
"babel-runtime": "6.6.1"
},
"babel": {
"presets": [
"es2015",
"react",
"stage-1"
]
}
}
Raw
transpiled.js
'use strict';
var _stringify = require('babel-runtime/core-js/json/stringify');
var _stringify2 = _interopRequireDefault(_stringify);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
require('whatwg-fetch');
var _redux = require('redux');
var _lodash = require('lodash');
var _fluxStandardAction = require('flux-standard-action');
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _reduxLogger = require('redux-logger');
var _reduxLogger2 = _interopRequireDefault(_reduxLogger);
var _reduxThunk = require('redux-thunk');
var _reduxThunk2 = _interopRequireDefault(_reduxThunk);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// Action
var action = function action() {
var thunk = function thunk(dispatch) {
return fetch('http://jsonplaceholder.typicode.com/users').then(function (response) {
return response.json();
}).then(function (json) {
dispatch({
payload: json,
type: 'LOAD_SUCCESS'
});
});
};
thunk.meta = { debounce: 'load', notFSA: true };
return thunk;
};
// Reducer
var users = function users() {
var state = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
var action = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
switch (action.type) {
case 'LOAD_SUCCESS':
return action.payload;
default:
return state;
}
};
// Debounce middleware
var debounceMiddleware = function debounceMiddleware() {
var config = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
return function () {
return function (next) {
var debouncers = (0, _lodash.mapValues)(config, function (option) {
if (typeof option === 'number') {
return (0, _lodash.debounce)(next, option);
}
var _option$wait = option.wait;
var wait = _option$wait === undefined ? 0 : _option$wait;
var options = (0, _objectWithoutProperties3.default)(option, ['wait']);
return (0, _lodash.debounce)(next, wait, options);
});
return function (action) {
var _action$meta = action.meta;
var meta = _action$meta === undefined ? {} : _action$meta;
if (!meta.notFSA && !(0, _fluxStandardAction.isFSA)(action)) {
return next(action);
}
var debouncer = debouncers[meta.debounce];
if (debouncer) {
return debouncer(action);
}
return next(action);
};
};
};
};
// Middlewares
var middleware = [debounceMiddleware({
load: 2000
}), _reduxThunk2.default, (0, _reduxLogger2.default)({ collapsed: true })];
// App
var store = (0, _redux.createStore)(users, _redux.applyMiddleware.apply(undefined, middleware));
var rootEl = document.getElementById('app');
function render() {
_reactDom2.default.render(_react2.default.createElement(
'pre',
null,
(0, _stringify2.default)(store.getState(), null, 2)
), rootEl);
}
render();
store.subscribe(render);
store.dispatch(action());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment