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/

THANKS!Nir@500tech.com@nirkaufman on twitter slideshare.net/nirkaufman/ github.com/nirkaufman

All pictures belong to their respective authors