Contenu connexe Similaire à ES6 patterns in the wild (20) ES6 patterns in the wild2. 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;
37. 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
}
}
}
38. 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
39. 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))
}
}
40. 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)
})
}
}
}
41. 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))
}
}
45. var namer = {
name: 'bill',
say: function() {
var that = this
console.log(this.name);
setTimeout(function() {
console.log(that.name);
},200);
}
}
47. const namer = {
name: 'bill',
say: function() {
console.log(this.name);
setTimeout(() => {
console.log(this.name);
},200);
}
}
51. 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;
55. Redux
Rest/Spread
export default function applyMiddleware(...middlewares) {
// Lots of stuff
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
}
}
56. 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)
58. export default function applyMiddleware(...middlewares) {
// Lots of stuff
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
}
}
59. 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)
61. 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)
63. export default function applyMiddleware(...middlewares) {
// Lots of stuff
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
}
}
64. 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)
}
}
66. 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
})
67. 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
})
68. 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
}
69. 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);
70. 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
},
]
71. 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
}
72. 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);
73. 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
},
]
74. 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
}
75. 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);
76. 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
},
]
77. 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
}
78. 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
}
79. 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);
80. 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
},
]
81. 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
}
83. ii. Your code will reflect your reading
data structures
architecture
community standards
84. ii. Your code will reflect your reading
It’s ok to take ideas
from others
86. 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
}
}
}
87. 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
}
}
}
98. 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) {
...
99. 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) {
...
100. 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) {
...
103. 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.
104. 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) {
...
105. 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;
}
}
106. const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
107. 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
109. export default class Expression extends Node {
get last() {
return this.children.last;
}
set last(value) {
this.children.last = value;
}
}
111. const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
112. 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 }
113. 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 }
114. 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 }
115. 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 }
116. export default class Expression extends Node {
get last() {
return this.children.last;
}
set last(value) {
this.children.last = value;
}
}
117. export default class Expression extends Node {
get last() {
return Object.assign(
{}, { name:'last' }, this.children.last
);
}
set last(value) {
this.children.last = value;
}
}
118. 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,
}
119. 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;
}
}
120. export default class Expression extends Node {
toString() {
return `${this.type}:${this.children.toString()}`;
}
}
121. export default class Expression extends Node {
toString() {
return this.type + ':' + this.children.toString();
}
}
122. 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;
}
}
123. export default class List extends Node {
...
toString() {
let first = true;
for (let node of this) {
// Do Stuff with node.id
}
}
}
124. export default class List extends Node {
...
toString() {
let first = true;
for (let node of this) {
// Do Stuff with node.id
}
}
}
125. const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
126. const presentation = [
'ES6 Patterns in the Wild',
'Joe Morgan',
]
for(let metadata of presentation) {
console.log(metadata);
}
127. 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
128. const presentation = {
title: 'ES6 Patterns in the Wild',
author: 'Joe Morgan',
}
for(let metadata of presentation) {
console.log(metadata);
}
129. 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
130. 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;
}
}
}
131. 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;
}
}
}
134. 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;
}
}
}
135. const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
136. const e = new Expression({id:1}, {id:2}, {id:3})
e = [{id:1}, {id:2}, {id:3}]
140. 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];
};
...
}
141. const presentation = {
title: 'ES6 Patterns in the Wild',
author: 'Joe Morgan',
}
> presentation.title
// 'ES6 Patterns in the Wild'
142. const presentation = {
title: 'ES6 Patterns in the Wild',
author: 'Joe Morgan',
}
> presentation.title
// 'ES6 Patterns in the Wild'
143. 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'
144. const presentation = new Map()
.set('title', 'ES6 Patterns in the Wild')
.set('author', 'Joe Morgan');
> presentation.get('title');
// 'ES6 Patterns in the Wild'
145. const presentation = new Map([
['title', 'ES6 Patterns in the Wild'],
['author', 'Joe Morgan']
]);
> presentation.get('title');
// 'ES6 Patterns in the Wild'
146. 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];
};
...
}
156. 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;
157. var data = [1,2,3,4];
var updated = [];
for(var i = 0; i < data.length; i++) {
updated.push(i*i);
}
return updated;
159. Perfection is finally attained not
when there is no longer anything
to add, but when there is no
longer anything to take away
160. 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;