WEB DEVELOPER
Angular
Node
FRP
Firebase
Neo4j
Kite-Surf
Speargun Fishing
Bitcoin
FRP
DI
Decorator
Typescript
Immutability
Reducer
Store
Action (SFA)
Observable
FRP
DI
Decorator
Typescript
Immutability
Reducer
Store
Action (SFA)
Implemented in many languages
Mediator,
Proxy,
Facade,
Cmd,
MVP,
MVW...
Lazy Producer
Consumer is in charge
Lazy Consumer
Producer is in charge
const tradeMaxPrice$ = stratFeed$
.pipe(
skipUntil(stratState$.pipe(
pluck('order'),
filter((x) => x.type === 'buy'),
takeUntil(stratState$.pipe(
pluck('order'),
filter((x) => x.type === 'sell'),
)),
)),
scan((acc, curr: Feed) => {
return (acc > curr.price) ? acc : curr.price;
}, 0),
tap(x => {
this.programmaticCommandSubject.next({tradeMaxPrice: x});
})
);
Orchestrate Application State Elegantly
Perfect for Highly Reative UI (ie: real time)
No Managing state in objects
Observable Chains
type: string
payload: any
error: bool
meta: any
FLUX STANDARD ACTION (FSA)
queryBooks = (payload?) => {
return this.store.dispatch(
{type: Commands.QUERY_BOOKS, payload}
);
}
queryBooks()
queryBooks()
Success
Failure
@Effect()
queryBooks$ = this.actions$
.pipe(
ofType(Commands.QUERY_BOOKS),
switchMap(_ => this.service.queryBooks()
.pipe(
map((res) => this.events.queryBooksComplete(res)),
catchError(err => this.events.queryBooksError(err))
)));
EFFECT
EVENT
EVENT
type: string
payload: any
error: bool
meta: any
FLUX STANDARD ACTION (FSA)
queryBooksComplete = (payload) => {
return {type: Events.QUERY_BOOKS_COMPLETE, payload};
};
queryBooksError = (payload) => {
return of({type: Events.QUERY_BOOKS_COMPLETE, payload, error: true});
};
queryBooksComplete
switch (event.type) {
case Events.QUERY_BOOKS_COMPLETE: {
return queryBooksSnapshot(state, event);
}
default: {
return state;
}
}
const queryBooksSnapshot = (state: IBook[], event): IBook[] => {
const newBooks = event.error ? [] : event.payload;
return [...state, ...newBooks];
};
REDUCER
Projection
queryBooks$(): Observable<IBook[]> {
return this.store.select('books');
}
export interface AppState {
books: IBook[];
}
export const reducers: ActionReducerMap<AppState> = {
books: fromBooks.getReducers
};
STORE
Books
Projection
books$: Observable<IBook[]> = this.bookProj.queryAll$();
<li *ngFor="let book of books$ | async">{{book.name}}</li>
View
Command
Effect
Event
Reducer
Snapshot
Store
Projection
Command
Effect
Event
Command
Side Effect
Command
View
Command
Effect
Event
Reducer
Snapshot
Store
Projection