Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

519 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

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

×