angular redux

49
DATA FLOW ARCHITECTURE IN ANGULAR2 WITH REDUX Nir Kaufman Deep dive into the pattern & implementation

Upload: nir-kaufman

Post on 12-Jan-2017

4.092 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Angular redux

DATA FLOW ARCHITECTURE IN ANGULAR2 WITH REDUX

Nir Kaufman

Deep dive into the pattern & implementation

Page 2: Angular redux

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

Page 3: Angular redux
Page 4: Angular redux

SPEAK.ANGULAR.CO.IL

Page 5: Angular redux

/user/AngularJSIL

Page 6: Angular redux

AGENDA• The basics • Redux overview & API • Coffee break • Project structure - Angular2 / Redux • Implementing common scenarios • Next steps

Page 7: Angular redux

THE CHALLENGE

Page 8: Angular redux

SPA BECOME INCREASINGLY

COMPLICATED

Page 9: Angular redux
Page 10: Angular redux

EVER-CHANGING

STATE

Page 11: Angular redux

EVERYTHING IS CONNECTED TO EVERYTHING

Page 12: Angular redux

COMPONENT

SERVICE

Page 13: Angular redux

COMPONENT

SERVICE

COMPONENT

SERVICE

COMPONENT

SERVICE

Page 14: Angular redux

COMPONENT

SERVICESERVICES

SERVICE

SERVICE

SERVICE

SERVICE

COMPONENTSERVICE

SERVICE

COMPONENT

Page 15: Angular redux

CHANGING SOMETHING

BREAKS SOMETHING SOMEWHERE

Page 16: Angular redux

SOLUTIONS

Page 17: Angular redux

CQRS* Use a different model to update information than the model you use to read information

*Command Query Responsibility Segregation

Page 18: Angular redux

EVENT SOURCING Capture all changes to an application state as a sequence of events.

Page 19: Angular redux

UI

Commands Model

Query Model

EVENTSTORE

STORE(STATE)

EVENTS QUEUE

COMMANDS

QUERIES

Page 20: Angular redux

STATELESS WEB ARCHITECTURE Dependent only on the supplied input parameters.

Page 21: Angular redux

IMMUTABLE OBJECT An object whose state cannot be modified after it is created.

Page 22: Angular redux

ENTER REDUX

Page 23: Angular redux

REDUX Predictable state container for JavaScript apps.

Page 24: Angular redux

SINGLE SOURCE OF TRUTH “The state of your whole application is stored in an object tree within a single store”

Page 25: Angular redux

THE STATE IS READ ONLY “The only way to mutate the state is to emit an action, an object describing what happened.”

Page 26: Angular redux

PURE FUNCTIONS “To specify how the state tree is transformed by actions, you write pure reducers.”

Page 27: Angular redux

Every interaction with the view results with an action that is sent to the store and mutates the state

ACTIONS

UI STATEACTION

Page 28: Angular redux

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

Page 29: Angular redux

The action hits a reducer that takes the state and the action and produces a new state

REDUCER

UI NEW STATEACTIONACTION

CREATOR

STATE

REDUCER

Page 30: Angular redux

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

Page 31: Angular redux

UI

MIDDLEWARESACTION

STATE REDUCER

ACTION CREATOR

ACTION

DATA FLOW

Page 32: Angular redux

REDUX IS

TINY ONLY FIVE METHODS

Page 33: Angular redux

THE STORE store = createStore(reducer)

STATEREDUCERdispatch(action) subscribe(listener)

getState()

Page 34: Angular redux

ACTIONS & CREATORS ARE JUST PLAIN OLD

JAVASCRIPT

Page 35: Angular redux

ALL THE REST combineReducers(reducers)

applyMiddleware(middlewares)

compose(functions)

bindActionCreators(creators, dispatch)

Page 36: Angular redux

LIVE CODING Exploring redux API

https://github.com/nirkaufman/redux-playground

Page 37: Angular redux

ANGULAR 2 & REDUX

Page 38: Angular redux

FOLDER STRUCTURE Group by type, keep the UI in its own folder

src

components

actions

reducers

middleware

constants

Page 39: Angular redux

ANGULAR BINDINGS Convenience methods for cleaner code

UI state

Page 40: Angular redux

NG2-REDUX unsubscribe = connect(mapState,mapActions);

https://github.com/wbuchwalter/ng2-redux

Page 41: Angular redux

LIVE CODING

Page 42: Angular redux

STEP 1 THE TODO LIST

Page 43: Angular redux

STEP 2 REDUX DEVTOOLS

Page 44: Angular redux

STEP 3 LOGGER MIDDLEWARE

Page 45: Angular redux

STEP 4 ASYNC DATA FLOW

Page 46: Angular redux

STEP 5 ADDING REDO/UNDO

Page 47: Angular redux

NEXT STEPS

Page 48: Angular redux

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/

Page 49: Angular redux

[email protected]@nirkaufman on twitter slideshare.net/nirkaufman/ github.com/nirkaufman

All pictures belong to their respective authors