Angular redux
•
7 likes•5,564 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/)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Angular redux
Similar to Angular redux (20)
More from Nir Kaufman
More from Nir Kaufman (13)
Recently uploaded
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! Nir@500tech.com @nirkaufman on twitter slideshare.net/nirkaufman/ github.com/nirkaufman All pictures belong to their respective authors