Angular redux
-
Upload
nir-kaufman -
Category
Technology
-
view
4.092 -
download
1
Transcript of Angular redux
DATA FLOW ARCHITECTURE IN ANGULAR2 WITH REDUX
Nir Kaufman
Deep dive into the pattern & implementation
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
SPEAK.ANGULAR.CO.IL
/user/AngularJSIL
AGENDA• The basics • Redux overview & API • Coffee break • Project structure - Angular2 / Redux • Implementing common scenarios • Next steps
THE CHALLENGE
SPA BECOME INCREASINGLY
COMPLICATED
EVER-CHANGING
STATE
EVERYTHING IS CONNECTED TO EVERYTHING
COMPONENT
SERVICE
COMPONENT
SERVICE
COMPONENT
SERVICE
COMPONENT
SERVICE
COMPONENT
SERVICESERVICES
SERVICE
SERVICE
SERVICE
SERVICE
COMPONENTSERVICE
SERVICE
COMPONENT
CHANGING SOMETHING
BREAKS SOMETHING SOMEWHERE
SOLUTIONS
CQRS* Use a different model to update information than the model you use to read information
*Command Query Responsibility Segregation
EVENT SOURCING Capture all changes to an application state as a sequence of events.
UI
Commands Model
Query Model
EVENTSTORE
STORE(STATE)
EVENTS QUEUE
COMMANDS
QUERIES
STATELESS WEB ARCHITECTURE Dependent only on the supplied input parameters.
IMMUTABLE OBJECT An object whose state cannot be modified after it is created.
ENTER REDUX
REDUX Predictable state container for JavaScript apps.
SINGLE SOURCE OF TRUTH “The state of your whole application is stored in an object tree within a single store”
THE STATE IS READ ONLY “The only way to mutate the state is to emit an action, an object describing what happened.”
PURE FUNCTIONS “To specify how the state tree is transformed by actions, you write pure reducers.”
Every interaction with the view results with an action that is sent to the store and mutates the state
ACTIONS
UI STATEACTION
The view doesn’t create the action. It calls a method on an action creator that results with an action
ACTION CREATOR
UI STATEACTIONACTION CREATOR
The action hits a reducer that takes the state and the action and produces a new state
REDUCER
UI NEW STATEACTIONACTION
CREATOR
STATE
REDUCER
A middleware can catch an action before it hits the reducer for applying async operations or other logic.
MIDDLEWARE
UI NEW STATEACTIONACTION
CREATOR
STATE
REDUCERMIDDLEWARES
UI
MIDDLEWARESACTION
STATE REDUCER
ACTION CREATOR
ACTION
DATA FLOW
REDUX IS
TINY ONLY FIVE METHODS
THE STORE store = createStore(reducer)
STATEREDUCERdispatch(action) subscribe(listener)
getState()
ACTIONS & CREATORS ARE JUST PLAIN OLD
JAVASCRIPT
ALL THE REST combineReducers(reducers)
applyMiddleware(middlewares)
compose(functions)
bindActionCreators(creators, dispatch)
LIVE CODING Exploring redux API
https://github.com/nirkaufman/redux-playground
ANGULAR 2 & REDUX
FOLDER STRUCTURE Group by type, keep the UI in its own folder
src
components
actions
reducers
middleware
constants
ANGULAR BINDINGS Convenience methods for cleaner code
UI state
NG2-REDUX unsubscribe = connect(mapState,mapActions);
https://github.com/wbuchwalter/ng2-redux
LIVE CODING
STEP 1 THE TODO LIST
STEP 2 REDUX DEVTOOLS
STEP 3 LOGGER MIDDLEWARE
STEP 4 ASYNC DATA FLOW
STEP 5 ADDING REDO/UNDO
NEXT STEPS
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/
[email protected]@nirkaufman on twitter slideshare.net/nirkaufman/ github.com/nirkaufman
All pictures belong to their respective authors