Angular redux
7 likes5,568 views
Slides from the "Data flow architecture in angular2 with redux". Introduction to Redux, it's inspirations and implementation. Join the "AngularJS-IL" meetup group for more community events and workshops! (http://www.meetup.com/AngularJS-IL/events/229660127/)
More Related Content
What's hot (20)
Viewers also liked (20)
Similar to Angular redux (20)
More from Nir Kaufman (13)
Recently uploaded (20)
Angular redux
- 1. DATA FLOW ARCHITECTURE IN ANGULAR2 WITH REDUX Nir Kaufman Deep dive into the pattern & implementation
- 2. NIR KUFMN Nir Kaufman - Doing Angular for years - Wrote a book about Angular2 - Plays the electric Bass Head of Angular Development @ 500Tech *This picture has been retouched. The actual speaker may look different
- 6. AGENDA • The basics • Redux overview & API • Coffee break • Project structure - Angular2 / Redux • Implementing common scenarios • Next steps
- 16. SOLUTIONS
- 17. CQRS* Use a different model to update information than the model you use to read information *Command Query Responsibility Segregation
- 18. EVENT SOURCING Capture all changes to an application state as a sequence of events.
- 20. STATELESS WEB ARCHITECTURE Dependent only on the supplied input parameters.
- 21. IMMUTABLE OBJECT An object whose state cannot be modified after it is created.
- 22. ENTER REDUX
- 23. REDUX Predictable state container for JavaScript apps.
- 24. SINGLE SOURCE OF TRUTH “The state of your whole application is stored in an object tree within a single store”
- 25. THE STATE IS READ ONLY “The only way to mutate the state is to emit an action, an object describing what happened.”
- 26. PURE FUNCTIONS “To specify how the state tree is transformed by actions, you write pure reducers.”
- 27. Every interaction with the view results with an action that is sent to the store and mutates the state ACTIONS UI STATEACTION
- 28. The view doesn’t create the action. It calls a method on an action creator that results with an action ACTION CREATOR UI STATEACTION ACTION CREATOR
- 29. The action hits a reducer that takes the state and the action and produces a new state REDUCER UI NEW STATE ACTION ACTION CREATOR STATE REDUCER
- 30. A middleware can catch an action before it hits the reducer for applying async operations or other logic. MIDDLEWARE UI NEW STATE ACTION ACTION CREATOR STATE REDUCER MIDDLE WARES
- 32. REDUX IS TINYONLY FIVE METHODS
- 33. THE STORE store = createStore(reducer) STATEREDUCER dispatch(action) subscribe(listener) getState()
- 34. ACTIONS & CREATORS ARE JUST PLAIN OLD JAVASCRIPT
- 35. ALL THE REST combineReducers(reducers) applyMiddleware(middlewares) compose(functions) bindActionCreators(creators, dispatch)
- 36. LIVE CODING Exploring redux API https://github.com/nirkaufman/redux-playground
- 37. ANGULAR 2 & REDUX
- 38. FOLDER STRUCTURE Group by type, keep the UI in its own folder src components actions reducers middleware constants
- 39. ANGULAR BINDINGS Convenience methods for cleaner code UI state
- 41. LIVE CODING
- 42. STEP 1 THE TODO LIST
- 45. STEP 4ASYNC DATA FLOW
- 47. NEXT STEPS
- 48. RESOURCES CQRS • https://msdn.microsoft.com/en-us/library/dn568103.aspx • http://martinfowler.com/bliki/CQRS.html EVENT SOURCING • https://msdn.microsoft.com/en-us/library/dn589792.aspx REDUX DEV-TOOLS • https://github.com/zalmoxisus/redux-devtools-extension UNDO/REDO • https://github.com/omnidan/redux-undo REDUX • http://redux.js.org/
- 49. THANKS! [email protected] @nirkaufman on twitter slideshare.net/nirkaufman/ github.com/nirkaufman All pictures belong to their respective authors