ES6 Patterns in the Wild
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
Code to Run
(wild code)
Code to Run
(wild code)
Code we write
Code we import
Code to Run
(wild code)
Code we write
Code we import
$$
Code to Teach
Code to Teach
Tutorials
Code to Teach
Tutorials
Documentation
Style Guides
Stack Overflow
Books
Conferences
Code to Teach
Tutorials
Documentation
Style Guides
Stack Overflow
Books
Conferences
Good Stuff
Syntax
SELECT ID, NAME, AGE, AMOUNT
FROM CUSTOMERS, ORDERS
WHERE CUSTOMERS.ID = ORDERS.CUSTOMER_ID;
Unreadable
Pattern
Complexity
What we expect
What we get
Code to Teach
Code to Run
Code to Teach
Code to Run
Simple
Complex
Complex
Simple
Joe Morgan
Lawrence, KS
I Write Code
Joe Morgan
Joe Morgan
Read
Joe Morgan
Read
Read
Critically
Reading Code
Redux
{
donuts: [
“chocolate”,
],
filter: null
}
state.donuts.map(donut => {
return (
<h2> {{donut}} </h2>
)
})
<h2> Chocolate </h2>
State
Component
{
donuts: [
“chocolate”,
],
filter: null
}
state.donuts.map(donut => {
return (
<h2> {{donut}} </h2>
)
})
<h2> Chocolate </h2>
State
Component
dispatch(addDonut(‘maple’))
{
donuts: [
“chocolate”,
“maple”,
],
filter: null
}
state.donuts.map(donut => {
return (
<h2> {{donut}} </h2>
)
})
<h2> Chocolate </h2>
State
Component
dispatch(addDonut(‘maple’))
updated state
{
donuts: [
“chocolate”,
“maple”,
],
filter: null
}
state.donuts.map(donut => {
return (
<h2> {{donut}} </h2>
)
})
<h2> Chocolate </h2>
State
Component
dispatch(addDonut(‘maple’))
updated state
{
donuts: [
“chocolate”,
“maple”,
],
filter: null
}
state.donuts.map(donut => {
return (
<h2> {{donut}} </h2>
)
})
<h2> Chocolate </h2>
<h2> Maple </h2>
State
Component
dispatch(addDonut(‘maple’))
Redux
Functional
Array Methods
High Order Functions
Curry/Partially Applied Functions
Redux
updated state
{
donuts: [
“chocolate”,
“maple”,
],
filter: null
}
state.donuts.map(donut => {
return (
<h2> {{donut}} </h2>
)
}
<h2> Chocolate </h2>
<h2> Maple </h2>
State
Component
dispatch(addDonut(‘maple’))
Middleware
Middleware
import compose from './compose'
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var store = createStore(reducer, preloadedState, enhancer)
var dispatch = store.dispatch
var chain = []
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
import compose from './compose'
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
}
}
Arrow Functions
import compose from './compose'
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
}
}
import compose from './compose'
export default function applyMiddleware(...middlewares) {
return function(createStore) {
return function (reducer, preloadedState, enhancer) {
var middlewareAPI = {
getState: store.getState,
dispatch: function (action) {
return dispatch(action);
}
}
chain = middlewares.map(function(middleware) {
return middleware(middlewareAPI)
})
}
}
}
import compose from './compose'
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
}
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
chain = middlewares.map(middleware => middleware(middlewareAPI))
chain = middlewares.map((middleware) => {return middleware(middlewareAPI)})
var that = this;
var namer = {
name: 'bill',
say: function() {
var that = this
console.log(this.name);
setTimeout(function() {
console.log(that.name);
},200);
}
}
var that = this;
const namer = {
name: 'bill',
say: function() {
console.log(this.name);
setTimeout(() => {
console.log(this.name);
},200);
}
}
Favor Arrow Functions
Why Read Wild Code?
i. Reading Code is a Skill
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
i. Reading Code is a Skill: Intuition
i. Reading Code is a Skill: Intuition
i. Reading Code is a Skill: Intuition
Redux
Rest/Spread
export default function applyMiddleware(...middlewares) {
// Lots of stuff
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
}
}
export default function applyMiddleware(...middlewares) {
// Lots of stuff
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
}
}
(I actually didn’t realize they had different names)
Redux
Rest/Spread
Rest:
list => array
export default function applyMiddleware(...middlewares) {
// Lots of stuff
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
}
}
export default function applyMiddleware(...middlewares)
examples/real-world/src/store/configureStore.dev.js
applyMiddleware(thunk, api, createLogger())
examples/real-world/src/store/configureStore.prod.js
applyMiddleware(thunk, api)
Redux
Rest/Spread
Spread:
array => list
export default function applyMiddleware(...middlewares) {
dispatch = compose(...chain)(store.dispatch)
examples/real-world/src/store/configureStore.dev.js
compose(thunk, api, createLogger())(store.dispatch)
examples/real-world/src/store/configureStore.prod.js
compose(thunk, api)(store.dispatch)
Redux
Rest/Spread
Convert items to arrays
export default function applyMiddleware(...middlewares) {
// Lots of stuff
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
}
}
export default function applyMiddleware(...middlewares) {
// Lots of stuff
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
}
}
Redux
Rest/Spread
Converting array to a new array without mutations
describe('combineReducers', () => {
it('returns a composite reducer that maps the state keys to given reducers', () => {
const reducer = combineReducers({
...
action.type === 'push' ? [ ...state, action.value ] : state
})
describe('combineReducers', () => {
it('returns a composite reducer that maps the state keys to given reducers', () => {
const reducer = combineReducers({
...
action.type === 'push' ? [ ...state, action.value ] : state
})
const family = [
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
const family = [
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
> family.sort(sortAge);
const family = [
{
name: 'Theo',
age: 1
},
{
name: 'Joe',
age: 34
},
{
name: 'Dyan',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
[
{
name: 'Theo',
age: 1
},
{
name: 'Joe',
age: 34
},
{
name: 'Dyan',
age: 34
},
]
const family = [
{
name: 'Theo',
age: 1
},
{
name: 'Joe',
age: 34
},
{
name: 'Dyan',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
const family = [
{
name: 'Theo',
age: 1
},
{
name: 'Joe',
age: 34
},
{
name: 'Dyan',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
> family.sort(sortName);
const family = [
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
[
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
]
const family = [
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
const family = [
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
> family.sort(sortAge);
const family = [
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
[
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
]
const family = [
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
const family = [
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
const family = [
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
> [...family].sort(sortAge);
const family = [
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
[
{
name: 'Theo',
age: 1
},
{
name: 'Joe',
age: 34
},
{
name: 'Dyan',
age: 34
},
]
const family = [
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}
ii. Your code will reflect your reading
ii. Your code will reflect your reading
data structures
architecture
community standards
ii. Your code will reflect your reading
It’s ok to take ideas from others
ii. Your code will reflect your reading
import compose from './compose'
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var store = createStore(reducer, preloadedState, enhancer)
var dispatch = store.dispatch
var chain = []
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
import compose from './compose'
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var store = createStore(reducer, preloadedState, enhancer)
var dispatch = store.dispatch
var chain = []
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
Redux
Object Spread
Not part of ES6
//.babelrc
{
"plugins": [
...
"transform-object-rest-spread",
],
...
}
Favor Arrow Functions
Favor Array Methods
(map, reduce, find, filter)
Collecting items to arrays
+
Arrow Functions
=
Happiness
Khan Academy
Khan Academy
Consumer code. Not a library.
Khan Academy
Khan Academy
Object Oriented
Complexity hidden behind interface
Popular in typescript (angular 2) world
export default class Expression extends Node {
constructor(...nodes) {
super();
this.type = 'Expression';
this.children = new List(this, ...nodes);
}
toString() {
return `${this.type}:${this.children.toString()}`;
}
toJSON() {
return {
...super.toJSON(),
children: [...f(this.children).map(child => child.toJSON())],
};
}
clone(uniqueId = false) {
...
export default class Expression extends Node {
constructor(...nodes) {
super();
this.type = 'Expression';
this.children = new List(this, ...nodes);
}
toString() {
return `${this.type}:${this.children.toString()}`;
}
toJSON() {
return {
...super.toJSON(),
children: [...f(this.children).map(child => child.toJSON())],
};
}
clone(uniqueId = false) {
...
export default class Expression extends Node {
constructor(...nodes) {
super();
this.type = 'Expression';
this.children = new List(this, ...nodes);
}
toString() {
return `${this.type}:${this.children.toString()}`;
}
toJSON() {
return {
...super.toJSON(),
children: [...f(this.children).map(child => child.toJSON())],
};
}
clone(uniqueId = false) {
...
iii. Feature Popularity
iii. Feature Popularity: Frequency
The more useful the feature the more frequent it will pop up.
iii. Feature Popularity: Frequency
In Shakespeare:
The top 10 most frequently occuring words make up 21.4% of all words.
�The top 100 most frequently occuring words make up 53.9% of all words.
export default class Expression extends Node {
constructor(...nodes) {
super();
this.type = 'Expression';
this.children = new List(this, ...nodes);
}
toString() {
return `${this.type}:${this.children.toString()}`;
}
toJSON() {
return {
...super.toJSON(),
children: [...f(this.children).map(child => child.toJSON())],
};
}
clone(uniqueId = false) {
...
export default class Expression extends Node {
constructor(...nodes) {
super();
this.children = new List(this, ...nodes);
}
toString() {
return `${this.type}:${this.children.toString()}`;
}
get last() {
return this.children.last;
}
set last(value) {
this.children.last = value;
}
}
const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
Linked List
Khan Academy
export default class Expression extends Node {
get last() {
return this.children.last;
}
set last(value) {
this.children.last = value;
}
}
Get/Set treats methods like properties (popular in typescript)
const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
e.last;
// { id: 3 }
const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
e.last = { id.4 }
const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 4
}
}
}
e.last = { id.4 }
const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 4
}
}
}
e.last = { id.4 }
export default class Expression extends Node {
get last() {
return this.children.last;
}
set last(value) {
this.children.last = value;
}
}
export default class Expression extends Node {
get last() {
return Object.assign(
{}, { name:'last' }, this.children.last
);
}
set last(value) {
this.children.last = value;
}
}
const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
e.last
{
name: ‘last’,
id: 3,�}
export default class Expression extends Node {
constructor(...nodes) {
super();
this.children = new List(this, ...nodes);
}
toString() {
return `${this.type}:${this.children.toString()}`;
}
get first() {
return this.children.first;
}
set first(value) {
this.children.first = value;
}
}
export default class Expression extends Node {
toString() {
return `${this.type}:${this.children.toString()}`;
}
}
export default class Expression extends Node {
toString() {
return this.type + ':' + this.children.toString();
}
}
export default class List extends Node {
...
toString() {
let first = true;
for (let node of this) {
if (!first) {
result += ", ";
} else {
first = false;
}
result += node.id;
}
return result;
}
}
export default class List extends Node {
...
toString() {
let first = true;
for (let node of this) {
// Do Stuff with node.id
}
}
}
export default class List extends Node {
...
toString() {
let first = true;
for (let node of this) {
// Do Stuff with node.id
}
}
}
const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
const presentation = [
'ES6 Patterns in the Wild',
'Joe Morgan',
]
for(let metadata of presentation) {
console.log(metadata);
}
const presentation = [
'ES6 Patterns in the Wild',
'Joe Morgan',
]
for(let metadata of presentation) {
console.log(metadata);
}
// ES 6 Patterns in the Wild
// Joe Morgan
const presentation = {
title: 'ES6 Patterns in the Wild',
author: 'Joe Morgan',
}
for(let metadata of presentation) {
console.log(metadata);
}
const presentation = {
title: 'ES6 Patterns in the Wild',
author: 'Joe Morgan',
}
for(let metadata of presentation) {
console.log(metadata);
}
> TypeError: presentation[Symbol.iterator] is not a function
export default class List {
...
*[Symbol.iterator]() {
let node = this.first;
while (node != this.last) {
let current = node;
node = node.next;
yield current;
}
if (this.last) {
yield this.last;
}
}
}
export default class List {
...
*[Symbol.iterator]() {
let node = this.first;
while (node != this.last) {
let current = node;
node = node.next;
yield current;
}
if (this.last) {
yield this.last;
}
}
}
iii. Feature Popularity:
Not all features end up being popular
iii. Feature Popularity:
Not all features end up being popular
export default class List {
...
*[Symbol.iterator]() {
let node = this.first;
while (node != this.last) {
let current = node;
node = node.next;
yield current;
}
if (this.last) {
yield this.last;
}
}
}
const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
const e = new Expression({id:1}, {id:2}, {id:3})
e = [{id:1}, {id:2}, {id:3}]
Khan Academy
Create Simple Interfaces
React
React
Performance
canUseCollections = (
...
typeof Map === 'function' &&
isNative(Map) &&
...
);
if (canUseCollections) {
var itemMap = new Map();
var rootIDSet = new Set();
setItem = function(id, item) {
itemMap.set(id, item);
};
getItem = function(id) {
return itemMap.get(id);
};
...
}
else {
var itemByKey = {};
var rootByKey = {};
var getKeyFromID = () => {}
var getIDFromKey = () => {}
setItem = function(id, item) {
var key = getKeyFromID(id);
itemByKey[key] = item;
};
getItem = function(id) {
var key = getKeyFromID(id);
return itemByKey[key];
};
...
}
const presentation = {
title: 'ES6 Patterns in the Wild',
author: 'Joe Morgan',
}
> presentation.title
// 'ES6 Patterns in the Wild'
const presentation = {
title: 'ES6 Patterns in the Wild',
author: 'Joe Morgan',
}
> presentation.title
// 'ES6 Patterns in the Wild'
const presentation = new Map();
presentation.set('title', 'ES6 Patterns in the Wild');
presentation.set('author', 'Joe Morgan');
> presentation.get('title');
// 'ES6 Patterns in the Wild'
const presentation = new Map()
.set('title', 'ES6 Patterns in the Wild')
.set('author', 'Joe Morgan');
> presentation.get('title');
// 'ES6 Patterns in the Wild'
const presentation = new Map([
['title', 'ES6 Patterns in the Wild'],
['author', 'Joe Morgan']
]);
> presentation.get('title');
// 'ES6 Patterns in the Wild'
canUseCollections = (
...
typeof Map === 'function' &&
isNative(Map) &&
...
);
if (canUseCollections) {
var itemMap = new Map();
var rootIDSet = new Set();
setItem = function(id, item) {
itemMap.set(id, item);
};
getItem = function(id) {
return itemMap.get(id);
};
...
}
else {
var itemByKey = {};
var rootByKey = {};
var getKeyFromID = () => {}
var getIDFromKey = () => {}
setItem = function(id, item) {
var key = getKeyFromID(id);
itemByKey[key] = item;
};
getItem = function(id) {
var key = getKeyFromID(id);
return itemByKey[key];
};
...
}
React
React
React
As ES6 becomes native there are advantages beyond style
Build a Library of Readable Code
Lurk Around Github
Lurk Around Github
Advanced Search
Glance at your dependencies
Have a few authors you like
iv. Code can be beautiful
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
var data = [1,2,3,4];
var updated = [];
for(var i = 0; i < data.length; i++) {
updated.push(i*i);
}
return updated;
const data = [1,2,3,4];
return data.map(n => n*n);
Perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
Joe Morgan
Joe Morgan
@joesmorgan
Joe Morgan
@joesmorgan
thejoemorgan.com
Joe Morgan
@joesmorgan
thejoemorgan.com
https://github.com/jsmapr1