Twitter ☞ @phacks
GitHub ☞ @phacks
Work ☞ @Theodo
Nicolas Goutay
Paris.js #55 // @phacks
Retour vers le Futur
avec
React, Redux & Immutable
Paris.js #55 // @phacks
Les frustrations du debugging
Paris.js #55 // @phacks
Modification du code
console.log ou debugger
Rebuild & refresh de l’a...
Redux, le meilleur ami du dev React
Paris.js #55 // @phacks
Réinterprétation du pattern Flux
Permet d’alimenter en données...
Redux, le meilleur ami du dev React
Paris.js #55 // @phacks
Hot reloading ! 👌
Redux, le meilleur ami du dev React
Paris.js #55 // @phacks
Hot reloading ! 👌
Visualisation du state tree en temps réel ! 👏
Redux, le meilleur ami du dev React
Paris.js #55 // @phacks
Hot reloading ! 👌
Visualisation du state tree en temps réel ! ...
Redux, une machine à états
Paris.js #55 // @phacks
Redux, une machine à états
Paris.js #55 // @phacks
Les composants UI React avec Redux
Paris.js #55 // @phacks
render() {
// …
return <li className={itemClass}>
<div classNam...
Les Actions
Paris.js #55 // @phacks
export function toggleComplete(itemId) {
return {
type: 'TOGGLE_COMPLETE',
itemId
}
}
...
Les Reducers
Paris.js #55 // @phacks
function toggleComplete(state, itemId) {
const itemIndex = state.get('todos').findInd...
Pourquoi choisir Redux ?
Paris.js #55 // @phacks
Un debugger qui fait aimer le debugging ❤
Le pattern force à structurer c...
Ressources
Paris.js #55 // @phacks
Mon tutoriel TodoMVC : bit.ly/1SDK1G2
Realtime app, Redux en front & back : bit.ly/1W1a...
Merci ! 🤗
Questions ?
Paris.js #55 // @phacks
Nächste SlideShare
Wird geladen in …5
×

Paris js

453 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
453
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
14
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Paris js

  1. 1. Twitter ☞ @phacks GitHub ☞ @phacks Work ☞ @Theodo Nicolas Goutay Paris.js #55 // @phacks
  2. 2. Retour vers le Futur avec React, Redux & Immutable Paris.js #55 // @phacks
  3. 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. 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. 5. Redux, le meilleur ami du dev React Paris.js #55 // @phacks Hot reloading ! 👌
  6. 6. Redux, le meilleur ami du dev React Paris.js #55 // @phacks Hot reloading ! 👌 Visualisation du state tree en temps réel ! 👏
  7. 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. 8. Redux, une machine à états Paris.js #55 // @phacks
  9. 9. Redux, une machine à états Paris.js #55 // @phacks
  10. 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. 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. 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. 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. 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. 15. Merci ! 🤗 Questions ? Paris.js #55 // @phacks

×