Angular redux
7 likes5,571 views
The document discusses the implementation of data flow architecture in Angular2 using Redux, focusing on common challenges and solutions like command query responsibility segregation and event sourcing. It highlights the key features of Redux as a predictable state container for JavaScript applications, emphasizing a single source of truth and the use of pure functions to manage state changes. The document also outlines project structure, live coding examples, and resources for further exploration.
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