This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
i18n.ActivityStatus={value, select, other {unknown}\ | |
COMPLETED {Completed}\ | |
DUE_TODAY {Due today}\ | |
OVERDUE {Overdue}\ | |
PENDING {Pending}\ | |
} | |
# Usage : {{'i18n.ActivityStatus' | translate:{value: activity.status} }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const ACCOUNT_REDUCER_TOKEN = new InjectionToken<ActionReducer<Map<string, Account>>>('Account state reducer') | |
export function accountReducerFactory(accountReducer: AccountReducer): ActionReducer<Map<string, Account>> { | |
// here you create a reducer function with access to other managed services | |
return accountReducer.createReducer() | |
} | |
@NgModule({ | |
imports: [ | |
StoreModule.forFeature('account', ACCOUNT_REDUCER_TOKEN) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Injectable() | |
export class AccountReducer { | |
// with real DI inside | |
constructor (private usefulService: UsefulService) {} | |
createReducer() { | |
// handle specific action with the help of your injected service and return new states, this is the pure reducer function | |
return (state: AccountState, action: Action) => { | |
if(action.type === 'SomethingUseful' /* or better still action instanceof SomethingUsefulAction, but this makes for another post ;-)*/) { | |
return {...state, {useful: this.usefulService.something(action.payload)}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Injectable() | |
export class AccountReducer extends EntityReducer<Account> { | |
private initialState: AccountState | |
createReducer() { | |
return (state: AccountState, action: Action) => { | |
if (action instanceof AppInitAction && state === undefined) { | |
return initialState | |
} else { | |
... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@NgModule({ | |
... | |
}) | |
export class AppModule { | |
constructor(applicationInitStatus: ApplicationInitStatus, | |
store: Store<AppState>) { | |
// dispatch the app init action when all stores have add a chance to rehydrate from indexedDb | |
applicationInitStatus.donePromise.then(() => store.dispatch(new AppInitAction())) | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Injectable() | |
export class AccountReducer { | |
private initialState: AccountState | |
... | |
bootstrap(): Promise<AccountState> { | |
return new Promise(resolve => | |
// rehydrate uses indexedDb to read the state | |
this.rehydrate(this.storage).subscribe(initialState => { | |
this.initialState = initialState | |
resolve() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Injectable() | |
export class AccountReducer { | |
private initialState: AccountState | |
... | |
bootstrap(): Promise<AccountState> { | |
return new Promise(resolve => | |
// rehydrate uses indexedDb to read the state | |
this.rehydrate(this.storage).subscribe(initialState => { | |
this.initialState = initialState | |
resolve() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function accountReducerBootstrapFactory(reducer: AccountReducer) { | |
// bootstrap() returns a Promise | |
return () => reducer.bootstrap() | |
} | |
@NgModule({ | |
... | |
providers: [ | |
{ | |
provide: APP_INITIALIZER, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function handleNotifications () { | |
const notifications = getNotifications() // as Notification[] | |
log(notifications) | |
displayNotificationCounter(notifications.length) | |
updateNotificationPanel(notifications) | |
... | |
} | |
// vs différents blocs indépendants du moment que l'observable de notifications est accessible | |
const notifications$ = getNotifications() // as Observable<Notification[]> | |
notifications$.subscribe(notifs => log(notifs)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const bitcoinQuotePromise = fetchQuoteAsPromise('btc') // la requête est émise ici | |
bitcoinQuotePromise.then(news => buy()) | |
bitcoinQuotePromise.then(news => tweet()) | |
// une seule requête http a été émise | |
const bitcoinQuoteObservable = fetchQuoteAsObservable('btc') // rien | |
bitcoinQuoteObservable.subscribe(news => buy()) // la requête est émise ici | |
bitcoinQuoteObservable.subscribe(news => tweet()) // une autre requête est émise ici | |
// deux requêtes ont été émises |
NewerOlder