From cb497a55f266668152f5166bc9346f3bc7a58b2b Mon Sep 17 00:00:00 2001 From: Rob McKeown Date: Mon, 17 Jul 2017 16:34:02 -0400 Subject: [PATCH] add ngrx and animations --- package.json | 4 ++ src/app/app.component.css | 3 ++ src/app/app.component.html | 7 ++- src/app/app.component.ts | 40 +++++++++++++++-- src/app/app.module.ts | 11 +++-- src/app/ngrx/demo/demo.component.html | 27 +++++++++++ src/app/ngrx/demo/demo.component.scss | 0 src/app/ngrx/demo/demo.component.ts | 53 ++++++++++++++++++++++ src/app/ngrx/demo/demo.module.ts | 25 +++++++++++ src/app/ngrx/demo/demo.service.spec.ts | 23 ++++++++++ src/app/ngrx/demo/demo.service.ts | 23 ++++++++++ src/app/ngrx/ngrx.module.ts | 44 ++++++++++++++++++ src/app/ngrx/store/index.ts | 48 ++++++++++++++++++++ src/app/ngrx/store/ui.store.ts | 62 ++++++++++++++++++++++++++ src/index.html | 3 +- src/main.ts | 4 +- 16 files changed, 366 insertions(+), 11 deletions(-) create mode 100644 src/app/ngrx/demo/demo.component.html create mode 100644 src/app/ngrx/demo/demo.component.scss create mode 100644 src/app/ngrx/demo/demo.component.ts create mode 100644 src/app/ngrx/demo/demo.module.ts create mode 100644 src/app/ngrx/demo/demo.service.spec.ts create mode 100644 src/app/ngrx/demo/demo.service.ts create mode 100644 src/app/ngrx/ngrx.module.ts create mode 100644 src/app/ngrx/store/index.ts create mode 100644 src/app/ngrx/store/ui.store.ts diff --git a/package.json b/package.json index 75f6c34..4dd2f24 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,11 @@ "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", + "@ngrx/core": "^1.2.0", + "@ngrx/store": "^2.2.1", "core-js": "^2.4.1", + "ngrx-store-freeze": "^0.1.9", + "reselect": "^2.5.4", "rxjs": "^5.1.0", "zone.js": "^0.8.4" }, diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..1879340 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -0,0 +1,3 @@ +ul app-item { + display: block; +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index cd2fd03..ce7cfae 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,6 +2,9 @@

{{item}}

+ NgRX Demo +

+ Shown below are two parts of the view that rely on the state from our ngrx store. Click the "Load Something" button + to trigger an action via the DemoService which will update the store's isLoading state to be true. After a short timeout + (to simulate a server call), the DemoService dispatches another action to set it back to false. The two items + below illustrate two different ways of displaying data from the store. See the demo.component.ts + file. +

Using the isLoading property

Current value: {{isLoading}}

+ Loading... + +

Using the isLoading$ observable and async pipe

isLoading$ Observable: {{isLoading$ | async}}

+ Loading + +

; + // end ngrx demo props + constructor(private service: DemoService, + private store: Store + ) { + + // We are going to select from the aggregate store using the getIsLoading() function that we exposed + // in the ngrx/store/index.ts file. The Observable that it returns can be subscribed to so that + // you can respond to changes. + store.select(fromRoot.getIsLoading).subscribe((isLoading: boolean) => { + this.isLoading = isLoading; + }); + + + // In some cases, you may just want to use the emitted value directly using the async pipe. + // in which case, you can just store a reference to the observable + // By convention, when doing this, you should suffix the property name with a $ + this.isLoading$ = store.select(fromRoot.getIsLoading); + // Then to use this property's value in your view, you can use: + // + // {{isLoading$ | async}} + // + // See the app.component.html file for an example + } + + ngOnInit() { + } + + loadSomething() { + this.service.loadSomething(); + } + +} diff --git a/src/app/ngrx/demo/demo.module.ts b/src/app/ngrx/demo/demo.module.ts new file mode 100644 index 0000000..dc11582 --- /dev/null +++ b/src/app/ngrx/demo/demo.module.ts @@ -0,0 +1,25 @@ +import { NgModule, ModuleWithProviders } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { DemoComponent } from './demo.component'; +import { DemoService } from './demo.service'; + + +@NgModule({ + imports: [ + CommonModule + ], + declarations: [ + DemoComponent + ], + exports: [ + DemoComponent + ], + entryComponents: [ + DemoComponent + ], + providers: [DemoService] +}) +export class DemoModule { + +} diff --git a/src/app/ngrx/demo/demo.service.spec.ts b/src/app/ngrx/demo/demo.service.spec.ts new file mode 100644 index 0000000..3681379 --- /dev/null +++ b/src/app/ngrx/demo/demo.service.spec.ts @@ -0,0 +1,23 @@ +import { TestBed, inject } from '@angular/core/testing'; +import { DemoService } from './demo.service'; +import { NgrxExampleModule } from '../ngrx.module'; +import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; + +describe('DemoService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [DemoService], + imports: [ + NgrxExampleModule.forRoot(), + FormsModule, + HttpModule + ] + }); + }); + + it('should ...', () => { + const service = TestBed.get(DemoService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/ngrx/demo/demo.service.ts b/src/app/ngrx/demo/demo.service.ts new file mode 100644 index 0000000..dedc743 --- /dev/null +++ b/src/app/ngrx/demo/demo.service.ts @@ -0,0 +1,23 @@ +import { Injectable } from '@angular/core'; + +/*NGRX_DEMO:*/ +import { Store } from '@ngrx/store'; +import * as fromRoot from '../store'; +import {UI_ACTIONS} from '../store/ui.store'; + +@Injectable() +export class DemoService { + + constructor(private store:Store) { } + + loadSomething() { + + /*NGRX_DEMO:*/ + console.log("Simulating load..."); + this.store.dispatch({ type: UI_ACTIONS.START_LOADING }); + setTimeout(() => { + console.log("Done."); + this.store.dispatch({ type: UI_ACTIONS.STOP_LOADING}); + }, 2000); + } +} diff --git a/src/app/ngrx/ngrx.module.ts b/src/app/ngrx/ngrx.module.ts new file mode 100644 index 0000000..e56ae0c --- /dev/null +++ b/src/app/ngrx/ngrx.module.ts @@ -0,0 +1,44 @@ +/** + * This is also stuck in its own module just for the demo. It doesn't + * have to go in its own directory. + * In fact, the StoreModule.provideStore() is usually done in the + * AppModule's imports + */ +import {NgModule, ModuleWithProviders} from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { StoreModule } from '@ngrx/store'; +import { reducer } from './store/index'; +// Delete the demo stuff here +// and the places below denoted by: //<-- +import { DemoComponent } from './demo/demo.component'; +import { DemoService } from './demo/demo.service'; +import { DemoModule } from './demo/demo.module'; + + +@NgModule({ + imports: [ + CommonModule, + StoreModule.provideStore(reducer), + DemoModule //<-- + ], + declarations: [ + + ], + exports: [ + DemoComponent + ], + providers: [ + DemoService + ] +}) +export class NgrxExampleModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: NgrxExampleModule, + providers: [ + + ] + }; + } +} diff --git a/src/app/ngrx/store/index.ts b/src/app/ngrx/store/index.ts new file mode 100644 index 0000000..c39d975 --- /dev/null +++ b/src/app/ngrx/store/index.ts @@ -0,0 +1,48 @@ +/** + * This is the main file that will aggregate your stores + * Make sure you have installed the required dependencies + * npm install --save @ngrx/{core,store} reselect ngrx-store-freeze + */ + +// Import each of your stores using the convention: +// import * as from[STORE_NAME] from './STORE_NAME.store'; +import * as fromUI from './ui.store'; + +import { ActionReducer, combineReducers } from '@ngrx/store'; +import { environment } from '../../../environments/environment'; +import { storeFreeze } from 'ngrx-store-freeze'; +import { compose } from '@ngrx/core'; +import { createSelector } from 'reselect'; + +// Aggregate all of the individual states into one main state +// this State should have a property for each of you child states +export interface State { + ui: fromUI.State; +} + +// Aggregate all of the reducers in a similar way +const reducers = { + ui: fromUI.reducer +}; + +// Adding the storeFreeze is useful in development because it will cause an exception to be thrown +// if you accidentally mutate the state +const developmentReducer: ActionReducer = compose(storeFreeze, combineReducers)(reducers); +const productionReducer: ActionReducer = combineReducers(reducers); + +// We only want to add in the storeFreeze meta-reducer in non-production builds +// we read the production flag from the environment (which will resolve to the correct one during the webpack build) +export function reducer(state: any, action: any) { + if (environment.production) { + return productionReducer(state, action); + } else { + return developmentReducer(state, action); + } +} + +// We will expose a function for getting each state out of our aggregate state +export const getUIState = (state: State) => state.ui; +// We will expose the selectors from each of the states by creating a nested selector +// using the functions exposed in each store. +export const getIsLoading = createSelector(getUIState, fromUI.isLoading); + diff --git a/src/app/ngrx/store/ui.store.ts b/src/app/ngrx/store/ui.store.ts new file mode 100644 index 0000000..296f949 --- /dev/null +++ b/src/app/ngrx/store/ui.store.ts @@ -0,0 +1,62 @@ + +/* + * This is an example of an ngrx/store that serves as an example of how to use it + * In this case, its state simply consists of a single boolean, but more complex states + * are handled exactly the same way. + * + */ + +import { Action } from '@ngrx/store'; + +// These are the actions that this store supports +// Note that the constant's value is prefixed with the store name. This isn't mandatory in this case, but when +// you have multiple stores that have simlar action names such as SAVE, you will want to distinguish them +export const UI_ACTIONS = { + START_LOADING: 'UI:START_LOADING', + STOP_LOADING: 'UI:STOP_LOADING' +}; + +// Define the interface for the state that this store manages +export interface State { + isLoading: boolean; +} + +// This is the initial state +const initialState: State = { + isLoading: false +}; + +// The reducer for this store. It responds to its actions and +// returns a new state object. It is important that you don't change the state and instead +// you return a new one. this can be done using Object.assign as shown here which takes the objects +// passed in and merges each one into the first one and returns it. +// In this case, since the state has only one property, you could just return a new state easily with +// +// return {isLoading: true}; +// +// However, usually there is more than one property in a store's state +// +// You can also use the spread operator to merge the state and your changes into a new object +// +// return {...state, isLoading:true}; +// +// However, the spread syntax for objects is not standardized yet +// +export function reducer(state = initialState, action: Action) { + switch (action.type) { + case UI_ACTIONS.START_LOADING: + return Object.assign({}, state, { isLoading: true }); + + case UI_ACTIONS.STOP_LOADING: + return Object.assign({}, state, { isLoading: false }); + + default: + return state; + } +}; + +// Return any helper functions that you would like to expose to access parts of your state +// For example, if your state maintained a collection of items and properties you want to filter by, +// you may export a function to return the whole list and a function that returns the filtered list + +export const isLoading = ((state: State) => state.isLoading); diff --git a/src/index.html b/src/index.html index 9a1013c..7c72b49 100644 --- a/src/index.html +++ b/src/index.html @@ -9,8 +9,9 @@ - Loading... + Loading... +

{{title}}

+ NgRX Demo +

Using the isLoading property

Using the isLoading$ observable and async pipe