-
-
Save abmohan/f92f23c3473aacb2c18b3e3bf26dba90 to your computer and use it in GitHub Desktop.
@ngrx/store integration with ngMetadata/Angular 1
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
import { Store } from 'ngrx-one/store'; | |
import { INCREMENT, DECREMENT, RESET } from './counter'; | |
interface AppState { | |
counter: number; | |
} | |
@Component({ | |
selector: 'my-app', | |
template: ` | |
<button (click)="increment()">Increment</button> | |
<div>Current Count: {{ counter | async }}</div> | |
<button (click)="decrement()">Decrement</button> | |
` | |
}) | |
export class AppComponent { | |
counter: Observable<number>; | |
constructor(public store: Store<AppState>){ | |
this.counter = store.select('counter'); | |
} | |
increment(){ | |
this.store.dispatch({ type: INCREMENT }); | |
} | |
decrement(){ | |
this.store.dispatch({ type: DECREMENT }); | |
} | |
reset(){ | |
this.store.dispatch({ type: RESET }); | |
} | |
} |
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
import { bootstrap } from 'ng-metadata/platform'; | |
import { provideStore } from 'ngrx-one/store'; | |
import { reducers } from './reducers'; | |
import { AppComponent } from './app.component'; | |
bootstrap( AppComponent, [ provideStore(reducers) ] ); |
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 { Store, provideStore } from './providers'; |
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
import { Reducer } from '@ngrx/store/reducer'; | |
import { Dispatcher } from '@ngrx/store/dispatcher'; | |
import { Store } from '@ngrx/store/store'; | |
import { State } from '@ngrx/store/state'; | |
import { combineReducers } from '@ngrx/store/utils'; | |
import { OpaqueToken, Injectable } from 'ng-metadata/core'; | |
// ngMetadata doesn't support currently string objects, so for now we have to stay with traditional OpaqueToken | |
export const INITIAL_REDUCER = new OpaqueToken('Token ngrx/store/reducer'); | |
export const INITIAL_STATE = new Opaquetoken('Token ngrx/store/initial-state'); | |
// ngMetadata needed annotations | |
@Injectable() | |
class NgOneDispatcher extends Dispatcher{} | |
@Injectable() | |
class NgOneStore extends Store{} | |
@Injectable() | |
class NgOneState extends State{} | |
@Injectable() | |
class NgOneReducer extends Reducer{} | |
const dispatcherProvider = { | |
provide: NgOneDispatcher, | |
useFactory() { | |
return new Dispatcher(); | |
} | |
}; | |
const storeProvider = { | |
provide: NgOneStore, | |
deps: [NgOneDispatcher, NgOneReducer, NgOneState, INITIAL_STATE], | |
useFactory(dispatcher: Dispatcher, reducer: Reducer, state$: State<any>, initialState: any) { | |
return new Store<any>(dispatcher, reducer, state$, initialState); | |
} | |
}; | |
const stateProvider = { | |
provide: NgOneState, | |
deps: [INITIAL_STATE, NgOneDispatcher, NgOneReducer], | |
useFactory(initialState: any, dispatcher: Dispatcher, reducer: Reducer) { | |
return new State(initialState, dispatcher, reducer); | |
} | |
}; | |
const reducerProvider = { | |
provide: NgOneReducer, | |
deps: [ NgOneDispatcher, INITIAL_REDUCER ], | |
useFactory(dispatcher: Dispatcher, reducer: any) { | |
return new Reducer(dispatcher, reducer); | |
} | |
}; | |
export function provideStore(reducer: any, initialState?: any): any[] { | |
return [ | |
{ | |
provide: INITIAL_REDUCER, | |
useFactory() { | |
if (typeof reducer === 'function') { | |
return reducer; | |
} | |
return combineReducers(reducer); | |
} | |
}, | |
{ | |
provide: INITIAL_STATE, | |
deps: [ INITIAL_REDUCER ], | |
useFactory(reducer) { | |
if (initialState === undefined) { | |
return reducer(undefined, { type: Dispatcher.INIT }); | |
} | |
return initialState; | |
} | |
}, | |
dispatcherProvider, | |
storeProvider, | |
stateProvider, | |
reducerProvider | |
]; | |
} | |
// now export store for ngMetadata DI | |
export { NgOneStore as Store }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment