Our speaker of the evening was Kristof Van Miegem, co-founder of Codifly (http://codifly.be/). He explained how to manage application state in React applications with Redux, followed by a focus on immutable data structures and how these data structures fit perfectly into this story.

1. React, Redux and Building
Applications that Scale
BY KRISTOF VAN MIEGEM
Co-Founder Codifly

2. Agenda
• Managing Application State
• Embracing Immutable Data Structures
• A Project Structure that Works

3. Managing Application State
With Redux

4. Example 1: Counter

5. Example 1: Counter
2 3

6. Example 2: Multiple Counters

7. Example 2: Multiple Counters
[ 1 ] [ 1, 4 ] [ 2, 4, 1 ]

8. Example 3: TodoMVC

9. Example 3: TodoMVC
{
todos: [
{ completed: true,
id: 0,
text: ‘Get a girfriend’ },
{ completed: true,
id: 1,
text: ‘Kiss her’ },
{ completed: false,
id: 2,
text: ‘Rule the world’ },
],
visibilityFilter: ‘SHOW_ALL’
}

10. State is Read-Only
The only way to change the state is to emit an
Action:
• A plain JavaScript that describes what
happened.
• Expresses an intent to change state

11. Example 1: Counter
{ type: ‘INC’ }

12. Example 2: Multiple Counters

13. Example 2: Multiple Counters
{ type: ‘INC’, counter: 0 }
{ type: ‘INC’, counter: 1 }
{ type: ‘INC’, counter: 2 }
{ type: ‘ADD_COUNTER’ }

14. Action Creators
function inc (counter) {
return { type: 'INC', counter };
}
function addCounter () {
return { type: 'ADD_COUNTER' };
}

15. State Changes are Made with Pure Functions
To specify how the state tree is transformed by
actions, you write reducers:
• Pure functions
• that take the previous state and an
action, and return the next state

16. reducer(state, action)
= reducer(state, action)
State Changes are Made with Pure Functions

17. Example: Counter
const counter = (state = 0, action) => {
switch (action.type) {
case 'INC':
return state + 1;
default:
return state;
}
};

18. Bringing it All Together: The Store
The store is responsible for:
• Containing the current state of the app
• Allowing state updates
• Notification of listeners

19. Store creation
let store = createStore(reducer)
Triggering changes: dispatching actions
store.dispatch(actionCreator(…))
Listening for state changes
store.subscribe(() =>
console.log(store.getState())
)
Bringing it All Together: The Store

20. Full Example
// Actions
const inc = () => ({ type: 'INC' });
const dec = () => ({ type: 'DEC' });
// Reducer
const counter = (state = 0, action) => {
switch (action.type) {
case ‘INC': return state + 1;
case ‘DEC': return state - 1;
default: return state;
}
};

21. Full Example
// View
class Counter extends React.Component {
render () {
return (
<div>
<h1>{this.props.value}</h1>
<button onClick={this.props.onIncrement}>
+
</button>
<button onClick={this.props.onDecrement}>
-
</button>
</div>
);
}
}

22. Full Example
// Store
const store = Redux.createStore(counter);
// Rendering
const render = () => {
ReactDOM.render(
<Counter
value={store.getState()}
onIncrement={() => store.dispatch(inc())}
onDecrement={() => store.dispatch(dec())}
/>,
document.getElementById('container')
);
};
render();
store.subscribe(render); https://jsfiddle.net/pxktc6pv/

23. Reselect
• Selectors get or compute data
• Selectors are composable
• Selectors are performant

24. Selectors
import { createSelector } from 'reselect'
const productsSelector =
state => state.productsInBasket
const vatPercentageSelector =
state => state.vatPercentage
const totalSelector = createSelector(
productsSelector,
vatPercentageSelector,
(products, vatPercentage) =>
products.reduce(
(acc, product) => acc + product.price, 0)
* (1 + vatPercentage)
)

25. Thunks
function inc () {
return (dispatch) => {
setTimeout(() => {
dispatch({ type: 'INC' });
}, 5000);
};
}

26. Embracing Immutable
Data Structures
For improved reasoning and performance

27. 3 + 5 = 8
Numbers are Immutable

28. Arrays are Mutable
var a = [3];
a.push(5);
console.log(a);

29. Hypothetical Immutable Array
var a = [3];
a.push(5);
console.log(a);
var a = [3]i;
var a2
= a.push(4);
console.log(a);
console.log(a2);

30. Slide title https://facebook.github.io/immutable-js/

31. Immutable List
var a = [3]i;
var a2
= a.push(4);
console.log(a);
console.log(a2);
var l = List([3]);
var l2
= list.push(4);
console.log(l.toJS());
console.log(l2.toJS());

32. Updating Immutable Data
(1) Deep clone
(2) Perform changes
(3) Return result
Conceptually, the update process

33. Structural Sharing
1
2 3
4 6 75
8
9

34. Structural Sharing
1
2 3
4 6 75
8
9

35. Structural Sharing
1
2 3
4 6 75
8
9
10

36. Structural Sharing
1
2 3
4 6 75
8
9
10
11

37. Get and Set
const map1 = Immutable.Map({ a: 1, b: 2, c: 3 });
const map2 = map1.set('b', 4);
console.log(map2.count()); // 3
console.log(map1.get('b')); // 2
console.log(map2.get('b')); // 4
const list1 = Immutable.List([ 1, 2 , 3 ]);
const list2 = list1.set(1, 4);
console.log(list2.count()); // 3
console.log(list1.get(1)); // 2
console.log(list2.get(1)); // 4

38. Nested Data Structures
var nested1 =
Immutable.fromJS({ a: { b: [ 1, 2, 3 ] } });
var nested2 =
nested1.setIn(['a', 'b', 1], 4);
console.log(nested1.getIn(['a', 'b', 1])); // 2
console.log(
nested2.getIn(['a', ‘b’]).toJS()); // [ 1, 2, 3 ]
console.log(nested2.getIn(['a', 'b', 1])); // 4

39. A Project Structure
that Works
Best practices at Codifly

40. “EditorConfig helps developers define and
maintain consistent coding styles between
different editors and IDEs.”
http://editorconfig.org/
Editorconfig

41. Editorconfig
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

42. function gcd (a, b) {
if (a == 0)
return b;
else {
return gcd(b % a, a);
}
}
ESLint

43. function gcd (a, b) {
if (a == 0)
return b;
else {
return gcd(b % a, a);
}
}
ESLint
2:3 error Expected { after 'if' condition
2:9 error Expected '===' and instead saw '=='
4:8 warning Unexpected 'else' after 'return'
8:1 warning Block must not be padded by blank lines

44. function gcd (a, b) {
if (a === 0) {
return b;
}
return gcd(b % a, a);
}
ESLint

45. ESLint
• Static Code Analysis
• “Agenda Free”
• Pluggable Standalone Rules
http://eslint.org/docs/rules/
• Customization via .eslintrc

46. Bringing it All Together
/src
/actions
/constants
/components
/reducers
/selectors
index.html
index.js
.babelrc
.editorconfig
.eslintrc
.gitignore
package.json
webpack.config.babel.js

47. Let’s script!
Getting our hands dirty with Redux
Slide title https://lpnpz04lxl.codesandbox.io/

48. Let’s script!
• Go to https://codesandbox.io/s/23lp02ql9n
/src
/actions
counterActions.js
/components
ClickButton.js
Counter.js
/reducers
counterReducer.js
index.js
/selectors
counterSelectors.js
index.js

49. Ready,
Set,
Code!
Solution: https://codesandbox.io/s/xkmq2p11w

50. Looking for
a challenge?
We are hiring!
Check out: https://codifly.be/careers