Retour vers le Futur - React, Redux & Immutable | Slides accompagnant mon talk au Paris.js #55.

1. Twitter ☞ @phacks
GitHub ☞ @phacks
Work ☞ @Theodo
Nicolas Goutay
Paris.js #55 // @phacks

2. Retour vers le Futur
avec
React, Redux & Immutable
Paris.js #55 // @phacks

3. Les frustrations du debugging
Paris.js #55 // @phacks
Modification du code
console.log ou debugger
Rebuild & refresh de l’app
Retour au state
Wash, rince, repeat
Répétition des actions

4. Redux, le meilleur ami du dev React
Paris.js #55 // @phacks
Réinterprétation du pattern Flux
Permet d’alimenter en données et de définir
les actions de composants React

5. Redux, le meilleur ami du dev React
Paris.js #55 // @phacks
Hot reloading ! 👌

6. Redux, le meilleur ami du dev React
Paris.js #55 // @phacks
Hot reloading ! 👌
Visualisation du state tree en temps réel ! 👏

7. Redux, le meilleur ami du dev React
Paris.js #55 // @phacks
Hot reloading ! 👌
Visualisation du state tree en temps réel ! 👏
Un debugger qui voyage dans le temps ! 🎉

8. Redux, une machine à états
Paris.js #55 // @phacks

9. Redux, une machine à états
Paris.js #55 // @phacks

10. Les composants UI React avec Redux
Paris.js #55 // @phacks
render() {
// …
return <li className={itemClass}>
<div className="view">
<input type="checkbox"
className="toggle"
defaultChecked={this.props.isCompleted}
onClick={() => this.props.toggleComplete(this.props.id)} />
<label htmlFor="todo"
ref="text"
onDoubleClick={() => this.props.editItem(this.props.id)}>
{this.props.text}
</label>
<button className="destroy"
onClick={() => this.props.deleteItem(this.props.id)}></button>
</div>
</li>
}
};
Rien dans les mains, tout dans les props !

11. Les Actions
Paris.js #55 // @phacks
export function toggleComplete(itemId) {
return {
type: 'TOGGLE_COMPLETE',
itemId
}
}
export function deleteItem(itemId) {
return {
type: 'DELETE_ITEM',
itemId
}
}
Une structure de données JSON normalisée

12. Les Reducers
Paris.js #55 // @phacks
function toggleComplete(state, itemId) {
const itemIndex = state.get('todos').findIndex(
(item) => item.get('id') === itemId
);
const updatedItem = state.get('todos')
.get(itemIndex)
.update('status', status => status === 'active' ? 'completed' : 'active');
return state.update('todos', todos => todos.set(itemIndex, updatedItem));
}
export default function(state = Map(), action) {
switch (action.type) {
case 'TOGGLE_COMPLETE':
return toggleComplete(state, action.itemId);
}
return state;
}
Pures fonctions : (state, action) ! newState
Implémentent la logique applicative

13. Pourquoi choisir Redux ?
Paris.js #55 // @phacks
Un debugger qui fait aimer le debugging ❤
Le pattern force à structurer clairement son app
Tests unitaires simple à mettre en place et
découplés (UI d’un côté, logique de l’autre)
Compatible React Native, Angular 1 & 2, VueJS…

14. Ressources
Paris.js #55 // @phacks
Mon tutoriel TodoMVC : bit.ly/1SDK1G2
Realtime app, Redux en front & back : bit.ly/1W1adrS
Un clone de Trello avec Redux & Phoenix : bit.ly/1YNekZh

15. Merci ! 🤗
Questions ?
Paris.js #55 // @phacks