Le document présente une discussion sur l'utilisation de React et Redux, mettant en avant les avantages du hot reloading et de la visualisation en temps réel de l'état. Il aborde également la structuration des applications avec Redux, la gestion des états et la simplicité des tests unitaires. Plusieurs ressources et tutoriels sont fournis pour approfondir la compréhension de ces technologies.

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