// topping.model.tsexportinterfaceTopping{id?: number;name?: string;[key: string]: any;}

@NgModule({imports: [StoreModule.forFeature('products',reducers)],providers: [],declarations: [],exports: [],})exportclassProductsModule{}

"apps": [{"root": "src",// add a appRoot property and set value of '.'"appRoot": ".","outDir": "dist","assets": ["assets","favicon.ico"],"index": "index.html","main": "main.ts","polyfills": "polyfills.ts","test": "test.ts","tsconfig": "tsconfig.app.json","testTsconfig": "tsconfig.spec.json","prefix": "app","styles": ["styles.css"],"scripts": [],"environmentSource": "environments/environment.ts","environments": {"dev": "environments/environment.ts","prod": "environments/environment.prod.ts"}}],

import{Pizza}from'./src/products/models/pizza.model.ts';//--- 0. import action file// we need import essentially all of our actions at once , we could do import load pizzas comma , load pizzas fail comma, what I like to do is use asterrisk that will import everything as what we can call that fromPizzas import*asfromPizzasfrom'./src/products/store/actions/pizzas.acton';// in ngrx we make massive(大量的) use of type checking , so let's go and make an interface , what we're going to call is the pizza state , so this is defining a slice of state that our reducer will manage in our entire state tree //--- 1. state slice interface exportinterfacePizzaState{data: Pizza[];loaded: boolean;loading: boolean;}// Inside this file we nedd a few things , we'll start off with our application initial state//----2. initial state slice exportconstinitialState: PizzaState={data: [],loaded: false,loading: false};//---3. reducer functionexportfunctionreducer(state=initialState,action: fromPizzas.PizzasAction):PizzaState{// 此处是一个易迷糊点 action是 fromPizzas.PizzasAction 即 `action creator` 的一个实例, 每个实例都有一个type 属性；而 type 属性又指向 `action constants` switch(action.type){// return a new representation of the state . We are going to return a brand new object , Now what we want to return is merging all of the initial state in , so our return statement is now conforming to what we've told it to in our reducer . //-1- In fact when we dispatch an event called LOAD_PIZZAS , we're essentially telling the application that we are loading , in the initial state we've setted loadding false , so in this case we just want just say loading is true ;casefromPizzas.LOAD_PIZZAS: {return{ ...state,loading: true}}//-2- In the LOAD_PIZZAS_SUCCESS case , we don't need to say that it loading ,so we're going to toggle that back to false . When the pizzas are loaded we want to acturally tell our store that the state is now changed to load . This allow us to contrl things like loading spinners , and when we come on to route guards we'll acturally be using this loaded preoperty to find out whether we loaded the pizzas , otherwise we're going to dispatch an action and make sure that those pizzas are loaded for us ;casefromPizzas.LOAD_PIZZAS_SUCCESS: {return{ ...state,loading: false,loaded: true}}// in the LOAD_PIZZAS_FAIL situation , we're going to change loading property to false, and loaded property is also false , because on a fail we have definitely not loaded anything and this will eradicate(摧毁，连根拔起) any previous state casefromPizzas.LOAD_PIZZAS_FAIL: {return{ ...state,loading: false,loaded: false}}}returnstate;}

import*asfromPizzasfrom'./src/products/store/reducers/pizzas.reducer';import{ActionReducerMap}from'@ngrx/store';// we're acturally jumping up one level here , we're got a reducer that we've created, but we need to acturally make it part of the store .//--1-- the module state which is a slice of entire state tree exportinterfaceProductsState{//So at this point we're defining the structure of our state tree, so in our ProductsState we're going have a slice of State call pizzas. The actrual interface for this is going to correspond PizzaState which in pizzas.reducer.ts pizzas: fromPizzas.PizzaState;// We've now composed a new interface that uses another interface further down our state tree (state tree 是分层的，首先是顶层的，state 其次是 feature module 的 ProductsState 底层是 PizzasState , 此处我们在构建中间层的时候利用了底层的PizzaState)}//--2-- Register our reducers ActionReducerMap// On our reducers we know that slice of state is managed by a reucer function . The first of state is pizzas and consequently that is managed by the fromPizzas.reducer, so we're essentially taking our reducer function binding it to the pizzas . Now we can acturally type check this , so ngrx give us a small little utility which we can use so we can say import something called ActionReducerMap. The ActionReducerMap accept a generic type so what we can say is ProductsState . We're difinitely implementing the correct reducers based on the different levels of state .// the reducers is essentially describing what these reducers look like and how they are composed exportconstreducers: ActionReducerMap<ProductsState>={pizzas: formPizzas.reducer,}

// to pass up what we just crated , so we are inside our reducers folder we have a index.ts(reducers/index.ts) , we can essentially access the reducers: ActionReducerMap// we need to do this because this is boilerplate with setting up our store piece-by-piece(一个接一个,一片一片的)export*from'./src/products/store/reducers'// 目的是 pass the reducers up one directore so er can access it in products.module.ts 

//import the StoreModules, because our products module has no idea that ngrx store exists at this point or that we want to start creating our own data structures// It's up to us at this point to go and register this module import{StoreModule}from'@ngrx/store';// import{reducers}from'./src/products/store';//---- @NgModule({import: [//-----// forFeature allows us to essentially lazy load everything to do with our store and it will bind itself to the root store object , so we"ve just got one object and when we lazy load a module , such as the ProductsModule itself which is completely lazy loaded.// Once we use the foFeature this will essentially attach itself to our root store (app.module.ts--- StoreModule.forRoot({},{metaReducers }),)// When our products module loads ，we then bind StoreModule.forFeature() to that root object . So that's what is happending that's the idea behind it .// The forFeature method accepts an argument , we need to say that it's going to the 'products' and we can then pass an empty object as the second argument . The empty object is acturally going to be our reducers so inside the /products/store/ folder waht we need to do again is acturally export evertthing inside of here. That is why we created this products/store/index.ts 暴露整个sore 的所有东西；// our reducers are now registered with our feature store module StoreModule.forFeature('products',reducers)]})exportclassProductsModule{}

// in pizzas.reducer.tsexportconstinitialState: PizzaState={data: [],loaded: false,loading: false};

// in pizzas.reducer.tsexportconstinitialState: PizzaState={loaded: false,loading: false};

// products/containers/products/products.component.ts//--1 import storeimport{Store}from'@ngrx/store';//--2 import Observable type checkingimport{Observable}from'rxjs/Observable';//--3 import anything from storeimport*asfromStorefrom'./src/products/store';// products/containers/products.component.tsexportclassProductsComponentimplementsOnInit{pizzas: Pizza[];//--4-inject store-- What we acturally want tosso is allow us to pass the ProductsState, so we can acturally type check this inside of a component // 依赖注入 Store : inside the constructor we can say private store is going to be of type Store which accept a generic type as well( because store is an observable of state and an observer of actions, so the same as Observable we should specify a generic type) .// we can specify fromStore.ProductsState, that mean we can access that ProductsState. So this is type checking that anything that we access inside of here alongside of our ProductsState . //That means that we can only select things from the store that correspond or exist in the ProductsState constructor(privitestore: Store<fromStore.ProductsState>){}// how we can obtain properties from our store ? we can use the store.select() method ngOnInit(){// we can pass in either a string or or we can pass in a function , if we pass in a function , it will return us a lice of state . // For this I'm going to do is just say select me the 'products'. now we're doing this because we have a slice of state // what we need do is essentially create a selector with the top=level property of 'products', so that we could jump a level down into our data structure to be able to access defferent properties (select 中所传递的 'product' 实际上是 selector的一个 property ) ('products' 实际上是和 /products.module.ts 中的 StoreModule.forFeature('products',reducers) 这条代码相对应的)this.store.select<any>('products').subscribe(state=>{console.log(state);})}}

// store/index.tsexportinterfaceProductsState{pizzas: fromPizzas.PizzaState,}exportconstreducers: ActionReducerMap<ProductsState>={pizzas: fromPizzas.reducer,}// we just created a pizza reducers and we call that the pizzas . The pizza reducer then manages a small selection of state which have the data , the loaded, the loading property ;// the store.select() method give us the state for the particular module which in our case is the products module and when we registered our store we said StoreModule.forFeature('products',reducers)// we passed in that string which says products , so that's why we've asked in the select method for a property called 'products'

// products/store/reducers/pizzas.reducer.ts// what we can do is to export a function which allows ngrx is essentially access PizzaState property without us needing to repeat ourselves over and over again .// so selecttor is somthing you use to compose state state and then we actually use the selector alongside store.select() in our components exportinterfacePizzaState{data: Pizza[];loaded: boolean;loading: boolean;}// function which accept state that type of PizzaState , so this is the piece of state that were given to us and it's going to be of type PizzaStateexportconstgetPizzas=(state: PizzaState)=>state.data;exportconstgetPizzasLoaded=(state: PizzaState)=>state.loaded;exportconstgetPizzasLoading=(state: PizzaState)=>state.loading;// these are small functions that get passed the small level of the pizza state and at that point in time we are down in our data structure . So this is a goog practice, put these undernearth your reducers.// Now we can compose things one level up and acturally pass this into what we call a create selector function (in reducers/index.ts)

// reducers/index.tsimport{createFeatureSelector,createSelector}from'@ngrx/store';// this is going to be a constant which holds a selector for our entire lazy loaded module . Now to create a selector waht we need to do is to import createFeatureSelector method , and pass in a string called 'products';// where this 'products' come frome? this was acturally when we register our module StoreModule.forFeature('products',reducers) . this particular feature starts with an object property called products ,so anything in this feature module is relied on a property called 'products'// so below code is creating a base reference to that 'products property' on our state . Because we have typescript here what we can actually do is pass in the ProductState as the generic type ;exportconstgetProductsState=createFeatureSelector<ProductState>('products');// To get this working in our component we acturally need another selector to essentially compose our product state , so we take the top level products and we'll // pizzas state// to export another const , what this is going to do is return us the products.pizzas . So we're going from from the top and down from products , then we're selecting that pizzas piece of State. Now we can do this by using the createSeletor, instead of the createFeatureSelector// to import the createSelector function , then we can pass in other selectors or we can pass in the functions we just created in products/store/reducers/pizzas.reducer.ts , which then we can pass to a component to select that slice of data all the way down the state tree // To use create selector is how we compose our application state . so how do we get the pizza state what we want to do is just create at the moment of reference to the next step down the state tree . exportconstgetPizzaState=createSelector(// --- at this point we acturally have getPizzaState which is going to pass in the ProductsState getProductState,(state: ProductsState)=>{state.pizzas});

// reducers/index.tsimport{createFeatureSelector,createSelector}from'@ngrx/store';import*asfromPizzasfrom'./pizzas.reducer';// 获取相对于 feature module 的root state;exportconstgetProductsState=createFeatureSelector<ProductState>('products');exportconstgetPizzaState=createSelector(getProductState,(state: ProductsState)=>{state.pizzas});exportconstgetAllPizzas=createSelector(// because we want to actually jump straight down the state tree , we can pass in getPizzaState as the argument , next callback function will be fromPizzas.getPizzasgetPizzaState,fromPizzas.getPizzas);exportconstgetPizzasLoaded=createSelector(getPizzaState,fromPizzas.getPizzasloaded,)exportconstgetPizzasLoading=createSelector(getPizzaState,fromPizzas.getPizzasloading,)

//1. let's assume we have a Javascript object and we have products object . conststate={// 2. Inside the products we've defined that we're going to have some level of pizzas , products: {//3. **now our pizza reducer acturally manages this slice of state*** , which has the data, loaded, loading property //4. this is essentially our entire ngrx store state tree .** We creat products as a feature module, so when our products feature module is loaded . ngrx store can add ``products:{....}```dynamically and the reducers(store/indext.ts) dynamically to our state tree . // 5. When the reducers are added to the state tree ,we've got one reducer called pizzas inside , and we bing our pizzas reducer to it . inside pizzas{..} we have data , loaded , loading // 6. So we're essentially stepping through the state tree by using selector functions // 7. We're first getProductsState(reducers/index.ts) , which is essentially getting a reference to products:{...}// 8. getAllPizzas is reference to pizzas:{...} etc.pizzas: {data: [],loaded: false,loading: false}}}

// products/containers/products/products.component.tsexportclassProductsComponentimplementsOnInit{pizzas: Pizza[];constructor(privatestore: Store<fromStore.ProductsState>){}ngOnInit(){// this.store.select<any>('products').subscribe(// state =>{// console.log(state);// }// )// instead of passing in a string , because we would have to manually go down from products and then we'd have to go to pizzas this.store.select(fromStore.getAllPizzas).subscribe(state=>{console.log(state);})}}

// products/containers/products/products.component.tsimport{Component,OnInit,ChangeDetectionStrategy}from'@angular/core';import{Pizza}from'../../models/pizza.model';import{Store}from'@ngrx/store';import{Observable}from'rxjs/Observable';import*asfromStorefrom'../../store'; @Component({selector: 'products',styleUrls: ['products.component.scss'],template: ` <div class="products"> <div class="products__new"> <a class="btn btn__ok" routerLink="./new"> New Pizza </a> </div> <div class="products__list"> <!- using the async pipe to subscribe the pizzas& observable-> <div *ngIf="!((pizzas | async)?.length)"> No pizzas, add one to get started. </div> <pizza-item *ngFor="let pizza of (pizzas | async)" [pizza]="pizza"> </pizza-item> </div> </div> `,})exportclassProductsComponentimplementsOnInit{// pizzas: Pizza[];pizzas$: Observable<Pizza[]>;constructor(privatestore: Store<fromStore.ProductsState>){}ngOnInit(){// this.store.select<any>('products').subscribe(// state =>{// console.log(state);// }// )// instead of passing in a string , because we would have to manually go down from products and then we'd have to go to pizzas this.pizzas$=this.store.select(fromStore.getAllPizzas);// this.store.select(fromStore.getAllPizzas).subscribe(// state =>{// // console.log(state);// // we can straightly pass this observable in async pipe which accept a promise or observable.// }// )}}

// store/actions/index.tsexport*from'./pizzas.action';

// store/index.tsexport*from'./reducers';export*from'./actions';

import{Component,OnInit,ChangeDetectionStrategy}from'@angular/core';import{Pizza}from'../../models/pizza.model';import{Store}from'@ngrx/store';import{Observable}from'rxjs/Observable';import*asfromStorefrom'../../store'; @Component({selector: 'products',styleUrls: ['products.component.scss'],template: ` <div class="products"> <div class="products__new"> <a class="btn btn__ok" routerLink="./new"> New Pizza </a> </div> <div class="products__list"> <div *ngIf="!((pizzas$ | async )?.length)"> No pizzas, add one to get started. </div> <pizza-item *ngFor="let pizza of (pizzas$ | async )" [pizza]="pizza"> </pizza-item> </div> </div> `,})exportclassProductsComponentimplementsOnInit{pizzas$: Observable<Pizza[]>;constructor(privatestore: Store<fromStore.ProductsState>){}ngOnInit(){// we're actually just using the initial state from the reducer , but it might be a good idea to actually introduce where we can dispatch an action to call our firt 'LOAD' event ;this.pizzas$=this.store.select(fromStore.getAllPizzas)// To create our first action 'LOAD PIZZAS' , and at the moment in our reducer function we have already are listening to this 'LOAD PIZZAs'. So at this point in time the store has called the reducer and we are returning the new state , say 'loading is true ';() 也就是说 组件 dispatch action 之后，这个action 不会想自己以前想的那样，会被effect 拦截。 而是会直接传到 reducer中去， 并返回一个新的 state)// we are waiting for 'LOAD_PIZZAS_SUCCESS', and this is where @ngrx/effects comes into play , we want to set up an effect to listen to our 'LOAD_PIZZAS' action, and it's going to make the request using one of our services , and then we're going to dispatch 'LOAD_PIZZAS_SUCCESS' from the effect , where we will be able to obtain the new state;this.store.dispatch(newfromStore.LoadPizzas());}}

// pizzas.effect.ts// Inside with this file , I will roll with the effect is to actually listen for that load pizzas action and then we're going to produce a different side effect.// The side effect of this case is we're acturally communication via HTTP to our local server and then we're going to bring that information back and then we're going to dispatch a new action saying that the request was successful .import{Injectable}from'@angular/core';// Actions is an observable ,we can then listen to the types of Actions that are being dispatched and respond to them accordingly import{Effect,Actions}from'@ngrx/effects';// import actionsimport*aspizzaActionsfrom'./actions/pizzas.action';import*asfromServicesfrom'../../services';import{switchMap,map,catchError}from'rxjs/operators'；import{of}from'rxjs/observable/of'; @Injectable()exportclassPizzasEffects{// effect is essenctially a class which contains a few properties which happen to be observables. now our observables get called by ngrx effects and kind of in a way act like a reducer so it allow us to reponse to different events and do different things // Now the role of reducer is to actually deal with pure javascript state and immutabe objects . In this case we're going to listening to some events that are acturally dispatched ,however we're dealing with observable streams and in our case we're using the pizza service to fetch some pizzas and then dispatch a new success action when they come back from server .// Actions is an observable constructor(privateaction$: Actions,privatepizzaService: fromServices.PizzasService){}// create property called loadPizzas$ which is going to be an observable // we can actually say that we want to listen an action of the specific type // *because in our component we have just dispatched that 'LOAD_PIZZAS'*, so we just will listen to the 'LOAD_PIZ ZAS' action. //*********************************************************************// This is where we want to perform a side effect . This is an observable stream and we can add observables to it we can return new observables and interestingly enough angular's HTTP client module returns an observable which means it fits directly into an effect .(因为 HTTP 模块也是返回 一个observable, 所以我们可以将 HTPP 模块 加到observable 流里面， 然后返回一个新的 observable), 这个逻辑 就类似于 promise chain 一样，一样的，无非是换了一种形式而已， 此处也是神技了 执行异步的神技）//*******************************************// This effects when the loadPizzas$ is executed we need to return an action and that is the key to understanding what an effect does. It doesn't do much more than what we're actually looking at , we just need to mark it as an effect using @Effect() decorator and then dispatch a new action back  @Effect()loadPizzas$=this.actions$.ofType(pizzaActions.LOAD_PIZZAS)// the pipe doesn't really do much itself but we can pass other operators go inside the pipe and this just simply contains a stream of pure functions instead of chaining them with the prototype ooperators so this .pipe(switchMap(()=>{returnthis.pizzaService.getPizzas().pipe(map(pizzas=>newpizzaActions.LoadPizzasSuccess(pizzas),),catchError(// 当 请求出现了错误，则我们所接收到的，就不再是一个 observable 了，服务器返回的只是一个error. 而 loadPizzas$ 是一个 observable 类型的，所以再返回之前我们需要将器转化为一个 observable; 利用of 函数；// import{ArrayObservable } from './ArrayObservable';// export const of = ArrayObservable.of;// 即 of 是 Observable.oferror=>of(newpizzaActions.LoadPizzasFail(error));))}))}

// store/effects/index.tsimport{PizzasEffects}from'./pizzas.effect';//we just want ro maintain everything in this one file ;// we can basically create an array of effects , we can give it a type of any array and we can just simply pass that pizza effectsas the first element.// this means that in our module ,we can just import the effects array and just register them as a whole , and we don't need to keep importing things . It ends up with this really big module file with all these imports everywhere. exportconsteffects: any[]=[PizzasEffects];// This is pretty much what export*from'./pizzas.effect';

// store/index.tsexport*from'./reducers';export*from'./actions';export*from'./effects';

// products.module.tsimport{NgModule}from'@angular/core';import{CommonModule}from'@angular/common';import{Routes,RouterModule}from'@angular/router';import{ReactiveFormsModule}from'@angular/forms';import{HttpClientModule}from'@angular/common/http';import{StoreModule}from'@ngrx/store';import{EffectsModule}from'@ngrx/effects';// import the effects arrayimport{reducers,effects}from'./store';import*asfromComponentsfrom'./components';import*asfromContainersfrom'./containers';import*asfromServicesfrom'./services';exportconstROUTES: Routes=[{path: '',component: fromContainers.ProductsComponent,},{path: ':id',component: fromContainers.ProductItemComponent,},{path: 'new',component: fromContainers.ProductItemComponent,},]; @NgModule({imports: [CommonModule,ReactiveFormsModule,HttpClientModule,RouterModule.forChild(ROUTES),StoreModule.forFeature('products',reducers),// register EffectsModuleEffectsModule.forFeature(effects)],providers: [...fromServices.services],declarations: [...fromContainers.containers, ...fromComponents.components],exports: [...fromContainers.containers, ...fromComponents.components],})exportclassProductsModule{}

// store/reducers/pizzas.reducer.ts// initial stateexportconstinitialState: PizzaState={data: [],loaded: false,loading: false};// reducer functionexportfunctionreducer(state=initialState,action: fromPizzas.PizzasAction): PizzaState{switch(action.type){// loading eventcasefromPizzas.PizzaActionTypes.LOAD_PIZZAS: {return{ ...state,loading: true}}// load success eventcasefromPizzas.PizzaActionTypes.LOAD_PIZZAS_SUCCESS: {constdata=action.payload;return{ ...state,loading: false,loaded: true, data }}// load fail eventcasefromPizzas.PizzaActionTypes.LOAD_PIZZAS_FAIL: {return{ ...state,loading: false,loaded: false}}}returnstate;}

// store/reducers/pizzas.reducer.ts// state slice interfaceexportconstinitialState: PizzaState={//--1 So what we want to do now is to refactor this over to became an entity . we're going to create an object which holds our entities and we're going to store them via an ID which which is going to be of type number . now every single entity will hold each particular pizza . So instead of just having one data property we're going to have entities which contains all of our pizzas and each pizzas ID is going to be the key inside the object .// data: [],// Indexable Types； if we use entities[10] it must be of type Pizzas; entities: {[id: number]: Pizzas},loaded: false,loading: false};// initial stateexportconstinitialState: PizzaState={// data: [],//--2 what we want to do is just initializa entities with a brand new empty object . entities: {},loaded: false,loading: false};// reducer functionexportfunctionreducer(state=initialState,action: fromPizzas.PizzasAction): PizzaState{switch(action.type){// loading eventcasefromPizzas.PizzaActionTypes.LOAD_PIZZAS: {return{ ...state,loading: true}}// load success eventcasefromPizzas.PizzaActionTypes.LOAD_PIZZAS_SUCCESS: {// console.log(action.payload);// const data = action.payload;/** * --3 conver the array structure which is: * [ *{id:1, name:one},  *{id:2, name : two} * ] * to object structure . * when we do things like subscribe to route params for instance you've probably seen while the user clicking through the spplication . Then when you go to a pizzas ,we acturally go to the pizza id which is `/products/IDs` . It could be ID of one , of two . *  * So the key of object will contain the value of the ID of the object . so what this means is we can actually be very quick . We can say entities[id ] that we can find the exact object we need we don't have to iterate through a gigantic data set every single time .  *  *{ * 1:{ * id: 1, * name: one * }, * 2:{ * id: 2, * name: two * } * } *  *  *  * *///-1- create a variable to accept the pizzas arrayconstpizzas=action.payload//-2- create the entities constant which will rebinded to our new return state. you could obviously break these types of things into a particular file where you can bring them in and convert a data structure to an entities of you liking. 可以将处理函数单独的放到一个文件中 以复用， 而此处我们只在文件内部定义；//-3- utilize reducer method to convert; /** * reduce 会接收两个参数，一个是callback函数，一个是一个初始值 * 初始值 会首先赋值给 callback 的第一个参数， 紧接着callback 每一次的执行结果，有又会赋值给callback的第一个参数， * 数组每次遍历的 item 会赋值给callback 函数的第二个参数； * 数组每遍历一个元素，callback都会被执行一次 */constentities=pizzas.reduce((entities: {[id:number]: Pizza},pizza: Pizza)=>{return{ ...entities,[pizza.id]: pizza}},{ ...state.entities})//-4- we're taking an array and we're flattening( 使 变平) the array into just pure object ( 也就是说，刚开始的结构是 分为多层的 最外层是数组， 向内是一个对象， 而现在我们将这个数组，平铺成为一个对象， 这就是flatten的含义) . So we can look up really fast . //-5- I think about feature when want to remove something from an array we don't have to iterate it if we want to update it we don't have to go and find it . We can just look it on our date structure and just simply replace it . It makes these things a little bit easier as well . return{ ...state,loading: false,loaded: true, entities }}// load fail eventcasefromPizzas.PizzaActionTypes.LOAD_PIZZAS_FAIL: {return{ ...state,loading: false,loaded: false}}}returnstate;}//-6- we should alse need to update getPizzas to getPizzasEntities // selectors// export const getPizzas = (state: PizzaState) => state.data;exportconstgetPizzasEntities=(state: PizzaState)=>state.entities;exportconstgetPizzasLoaded=(state: PizzaState)=>state.loaded;exportconstgetPizzasLoading=(state: PizzaState)=>state.loading;

// store/reducers/index.tsexportconstgetProductsState=createFeatureSelector<ProductsState>('products');exportconstgetPizzaState=createSelector(getProductsState,(state: ProductsState)=>state.pizzas)//1. Now we're doing is acturally passing the fromPizzas.getPizzasEntities as the second argument to this selector which means we need to create another selector to allow us to acturally get all of these as an array value we want them as an array , and we dont want them as objects . //2. So what we can do instead of creating this getAllPizzas, we can rename this to get pizzas entities so we use the same function names as before , but we'just exporting then on level up , we're not clashing with names or anything like this we acturally want to create the ability for us to select all of the pizzas as an array exportconstgetPizzasEntities=createSelector(getPizzaState,fromPizzas.getPizzasEntities)//3. we're actually doing is replace the selector with a new one . we're passing the getPizzasEntities as the first argument , and because this is a selector , we can also use it as a function , so we don't have to use those functions which are exported from different levels `we can use the selectors to compose brand new state. `exportconstgetAllPizzas=createSelector(getPizzasEntities,// we get the given entities because that is what we passing through getPizzasEntities, callback will be called with the given entities . What we want to do inside of callback function is to convert the entities object data structure in an array with Object.keys() method .// Object.keys() accpet a object argument, return a array which is composed by the object's key . var obj ={'a':'123','b':'345'}; --> console.log(Object.keys(obj)); //['a','b']// we're simply doing is something that looks like this and then mapping over it and return the actual entity which is the corresponds with each IDs . [1,2,3].map()(entities)=>{// be carefully the element return by the Object.keys() is string, what we need is a number index, so We need parseInt() method to convert it to number。 parseInt() accept two argument , the first is the string which we're going to convert , the second is 数字进制； 10 is represent 十进制；Object.keys(entities).map(id=>entities[parseInt(id,10)])// conclusion : We should get all pizzas , get the entities as the first argument , we're hpoing to return the Object.keys() which gices us every single key as a string , we're then looping over those , we get each ID and we're using that entities whch is above to then look each item up by its ID and we just simply just passing that string in but convert it to a number , now it depends how you're structuring things in your database , you may use a completely string or a number approach })exportconstgetPizzasLoaded=createSelector(getPizzaState,fromPizzas.getPizzasLoaded)exportconstgetPizzasLoading=createSelector(getPizzaState,fromPizzas.getPizzasLoading)

// containers/products/products.component.tsexportclassProductsComponentimplementsOnInit{pizzas$: Observable<Pizza[]>;constructor(privatestore: Store<fromStore.ProductsState>){}ngOnInit(){// It's in selector files to compose the result we want this.pizzas$=this.store.select(fromStore.getAllPizzas);this.store.dispatch(newfromStore.LoadPizzas());}}

// store/index.tsexport*from'./reducers';

// store/reducers/index.ts exportconsta='';

// store/reducers/index.tsimport*asfromRouterfrom'@ngrx/router-store';// import the queryParams type import{Params}from'@angular/router';// import the ActionReducerMap to type the reducers import{ActionReducerMap}from'@ngrx/store';// import the createFeatureSelector to create selector;import{createFeatureSelector}from'@ngrx/store';// there's a fwe more things that we need to do to get this set up properly :// (1) the first we need to do is actually define what this router of state is going to look like :exportinterfaceRouterStateUrl{url: string;queryParams: Params;params: Params}// export the interface of State is going to have a property called the RooterReducer . Now the ngrx route-store project requires you actually do this. so we need to supply the word of RouterReducer, so we need to keep that as the key on our state //-1- the state interfaceexportinterfaceState{// the RouterStateUrl is essentially to say that our route a reducer `rooterReducer: fromRouter.routerReducer` is going to actually be conforming to RouterStateUrl interface . So we're only going to supply the url, queryParams, paramsrouterReducer: fromRouter.RouterReducerState<RouterStateUrl>;}// The '@ngrx/router-store' package is essentially giving us this state representation whcih means we can actually export some new reducers ;// The '@ngrx/router-store' gives us all of this for free we just simply import it and wer bind it to our routerReducers which we've called the router reducers because it's going to live inside of our app module at the root of our project , it just so happens that it includes a rooterReducer //-2- the store reducersexportconstreducers: ActionReducerMap<State>={routerReducer: fromRouter.routerReducer}// 3 create selectors :// Much like in our other reducers we also want ro create a selector so that we can ask for this particular piece Of State, // (2) getRouterState which actually allow us to add this getRouterState to another selector inside of our products folder ;exportconstgetRouterState=createFeatureSlector<// THis generic is making sure that we've typed things correctly , we do this is just to making sure that we can only tell the createFeatureSlector that you can access some of these properties on the root reducer;// 'routerReducer' is the property of the Root State;fromRouter.RouterReducerState<RouterStateUrl>>('routerReducer')

// src/app/app.module.tsimport{NgModule}from'@angular/core';import{BrowserModule}from'@angular/platform-browser';import{Routes,RouterModule}from'@angular/router';import{BrowserAnimationsModule}from'@angular/platform-browser/animations';import{StoreModule,MetaReducer}from'@ngrx/store';import{EffectsModule}from'@ngrx/effects';//1. import the ActionReducerMap reducers import{reducers}from'./store';import{StoreDevtoolsModule}from'@ngrx/store-devtools';import{storeFreeze}from'ngrx-store-freeze';constenvironment={development: true,production: false,};exportconstmetaReducers: MetaReducer<any>[]=!environment.production ? [storeFreeze] : [];import{AppComponent}from'./containers/app/app.component';exportconstROUTES: Routes=[{path: '',pathMatch: 'full',redirectTo: 'products'},{path: 'products',loadChildren: '../products/products.module#ProductsModule',},]; @NgModule({imports: [BrowserModule,BrowserAnimationsModule,RouterModule.forRoot(ROUTES),// replace the empty object in forRoot(), with our new reducersStoreModule.forRoot(reducers,{ metaReducers }),EffectsModule.forRoot([]),environment.development ? StoreDevtoolsModule.instrument() : [],],declarations: [AppComponent],bootstrap: [AppComponent],})exportclassAppModule{}

/* app/store/reducers/index.ts *//* */import*asfromRouterfrom'@ngrx/router-store';// 1. import the ActivatedRouteSnapshot and RouterStateSnapshot from @angular/routerimport{ActivatedRouteSnapshot,RouterStateSnapshot,Params}from'@angular/router';import{ActionReducerMap}from'@ngrx/store';import{createFeatureSelector}from'@ngrx/store';exportinterfaceRouterStateUrl{url: string;queryParams: Params;params: Params}exportinterfaceState{routerReducer: fromRouter.RouterReducerState<RouterStateUrl>;}exportconstreducers: ActionReducerMap<State>={rooterReducer: fromRouter.routerReducer}exportconstgetRouterState=createFeatureSlector<fromRouter.RouterReducerState<RouterStateUrl>>('routerReducer')// When you build out your own application it might be that we adjust the custom serializer to give you your own properties you nedd for a specific use case exportclassCustomSerializerimplementsfromRouter.RouterStateSerializer<RouterStateUrl>{// This serialize function actually gets given what we can call the RooteState and that is essentially going to match against angular's ActivatedRouteSnapshot// serialize() method 接收的参数是 RouterStateSnapshot 即 当前的路由状态树， 其要序列化的也是这个东西， 我们想获取的东西，也都得从这里面出来； 里面的东西很多，我们可以自由的去组织里面的东西=（因为这个serializer 方法是我们自定义的）， 以满足我们正常的需要；serialize(routerState: RouterStateSnapshot): RouterStateUrl{// The things that we need to return is in fact RouterStateUrl, what we need to do is to compose a new object implements RouterStateUrl based on the properties of the Router //-1- get the url from the routerState. we're actually going to to is Destructuring(es6解构赋值) from routerState itselfconst{ url }=routerState;//-2- get queryParamsconst{ queryParams }=routerState.root;// The way that the Router actually works is it is a state tree of itself which means that we actually need to traverse the state tree. we're not going to go in to much detail. but we could just kind of explain the concept of what's happening . So you can understand where we're actually obtain this information from // we are using the let statement because we actually want to resign it , we're going to use a while loop .// Now we can get that initial state from the routerState.rootletstate: ActivatedRouteSnapshot=routerState.root;// Now because the routerState.root is in fact a state tree , means we can iterate this state tree// any of state properties are available for us to place in our own custom serializer . So what we actually want is the first child , so this will actually allow us to keep iterating through the root of state tree by itself , this isn't the sate tree to do with ngrx , this is the state tree of angular's Router// We're essentially hijacking(劫机 劫持) it and taking a few properties then binding that to our ngrx store , so that's what's happending .// So while we have a firstChild that means that we have child routes .// For instance if we have /products/1 which means that we need to iterate a few times to be able to go and get that (route program) while(state.firstChild){// so while we have a first child , the state is then going to be equal to the state.firstChild;state=state.firstChild;}// so then each time we can then keep running the while loop and when we get to the end we can actually grap those params .// const params = state.params;const{ params }=state;// This returned objeect is acturally what is going to be bound to ngrx stores state tree .// The route store project which is part of the ngrx project will actually listen to angular's routing events anytime you navigate somewhere or angular navigate somewhere or something changes in the URL , this whole serialize function is going to be called which means we get the new state representation of where we are in the application or all times. So it's important to remember that piece return{ url,queryParams, params };}}

/* app.module.ts */import{NgModule}from'@angular/core';import{BrowserModule}from'@angular/platform-browser';import{Routes,RouterModule}from'@angular/router';import{BrowserAnimationsModule}from'@angular/platform-browser/animations';// 1. import StoreRouterConnectingModule and RouterStateSerializerimport{StoreRouterConnectingModule,RouterStateSerializer}from'@ngrx/router-store';import{StoreModule,MetaReducer}from'@ngrx/store';import{EffectsModule}from'@ngrx/effects';// 3. import our custom serializerimport{reducers,CustomSerializer}from'./store';import{StoreDevtoolsModule}from'@ngrx/store-devtools';import{storeFreeze}from'ngrx-store-freeze';constenvironment={development: true,production: false,};exportconstmetaReducers: MetaReducer<any>[]=!environment.production ? [storeFreeze] : [];import{AppComponent}from'./containers/app/app.component';exportconstROUTES: Routes=[{path: '',pathMatch: 'full',redirectTo: 'products'},{path: 'products',loadChildren: '../products/products.module#ProductsModule',},]; @NgModule({imports: [BrowserModule,BrowserAnimationsModule,RouterModule.forRoot(ROUTES),StoreModule.forRoot(reducers,{ metaReducers }),EffectsModule.forRoot([]),//2. register StoreRouterConnectingModule in @Ngmodule,then router package can then keep our state updated in our state tree StoreRouterConnectingModule,environment.development ? StoreDevtoolsModule.instrument() : [],],// 3. we need to provide CustomSerializer, this is tie in with angular's dependency injection , so what we're going to do is essentially provide a route of state serializer and use our own custom serializer // we're registering a provider we're providing the RouterStateSerializer and we're actually saying use our class our custome serializer .// So when our StoreRouterConnectingModule actually internally uses this particular token we're essectially replacing it with our own , So we're in full control of what gets bound to our state tree . So once you've done that we'll go to the browser and we won't actually visually, but we can use the redux dev-tools .providers: [{provide: RouterStateSerializer,useClass: CustomSerializer}]declarations: [AppComponent],bootstrap: [AppComponent],})exportclassAppModule{}

import*asfromPizzasfrom'./pizzas.reducer';//1. remove createSelectorimport{ActionReducerMap,createFeatureSelector}from'@ngrx/store';//2. keep 1exportinterfaceProductsState{pizzas: fromPizzas.PizzaState,}//3. keep2exportconstreducers: ActionReducerMap<ProductsState>={pizzas: fromPizzas.reducer,}//4. keep3exportconstgetProductsState=createFeatureSelector<ProductsState>('products');// The above three things lie inside of here , because inside of this reducers folder what we're actually goping to do is have multiple reducers and and they all are part of this `products` feature module which is why it's called a feature selector; 

// 1. import createSelectorimport{createSelector}from'@ngrx/store';// 2. import everything as fromFeature , because this is a feature module we're going to actually ask for some of the logic that we put in that index file inside the reducer import*asfromFeaturefrom'./reducers';// 3. import everything in pizzas.reducer.tsimport*asfromPizzasfrom'../reducers/pizzas.reducer';// 4. It's actually at this point where we want to take data from the route state and then compose it to go and select an individual pizza entity based on the the route params . So if the route params is 2 , we can go an look up our map of identities using the params[id] . So waht we're going to say import*asfromRootfrom'../../../app/store';// 5. There is one chage we want to make to the routing structure , so before we go any further , Let's change something inside of 'products.module.ts'// 6 . import the Pizza model to type the selected pizzaimport{Pizza}from'../../models/pizza.model';exportconstgetPizzaState=createSelector(// modify 1:fromFeature.getProductsState,(state: fromFeature.ProductsState)=>state.pizzas)exportconstgetPizzasEntities=createSelector(getPizzaState,fromPizzas.getPizzasEntities)// 6. Inside of our state tree, we're going to have a router params with a property of pizzaId , which means that we can go and compose this in our selector so what we are actually interesting in is creating a new selector --- getSelectedPizza . We call that getSelectedPizza because when we navigate to /1 or /2 , we want to say that is the selected pizza and we know it's the selected pizza because the route params are telling us that we are currently at that route. So we can then go and select the piece of state necessary bring it back from store and render it in our application . This is the thinking of the flow exportconstgetSelectedPizza=createSelector(getPizzasEntities,// we are asking for a reference to the root of reducer which means we can access the state object on the roputerfromRoot.getRouterState,(entities,router): Pizza=>{// what we essentially want to do is use the Router state to look up an entity and this is the whole reason not just for performance resons that we get a bigger gain(利润 获益) when it comes to using an entity we don't hace to iterate over collections , we don't have to map through them to just simply update someting we can reference an entity by looking up it's ID so directly // The benefit with this is the route state will actually tell us the ID of the pizzas that we're on so what we can say is :/* 此处非常重要，因为其点明了，route state 的selector 的使用方式 */// router参数的值： 对应的就是 app/store/reducers/index.ts reducers 中的 routerReducer ， 其有一个 state 属性（这是 route store package 处理的）， state 属性是一个对象，是我们序列化之后的对象 which iwe used in the custom serializer to then bind them directly to the store if you need a specific use case we need another object from the store ,we can add directly to the RouterStateUrl and it will be available in typescript in these options ；returnrouter.state&&entities[router.state.params.pizzaId]// The selectors make it really nice , really easy and once you get used to them is absolutely fantastic on how we can compose state via different states around our application, `router.state && entities[router.state.params.pizzaId]` 即是一个新的composed state. 这就是 compose state 的意思，其是在 selector 去 compose })exportconstgetAllPizzas=createSelector(getPizzasEntities,(entities)=>{returnObject.keys(entities).map((id)=>{returnentities[parseInt(id)];})})exportconstgetPizzasLoaded=createSelector(getPizzaState,fromPizzas.getPizzasLoaded)exportconstgetPizzasLoading=createSelector(getPizzaState,fromPizzas.getPizzasLoading)

export*from'./pizzas.selectors';

export*from'./selectors';

exportconstROUTES: Routes=[{path: '',component: fromContainers.ProductsComponent,},{path: 'new',component: fromContainers.ProductItemComponent,},//1. When we actually want to select some of the route state we might actually want to be more descriptive to avoid any naming collisions or perhaps being confused of what property that is an ID actually exists in the route path . So we're going to rename this to the pizza ID //2. 将 pizzaId 路由放到最后，because we try to match the path 'new' first , then as a fullback we can then request that as a pizza ID {path: ':pizzaId',component: fromContainers.ProductItemComponent,},];

import{Component,OnInit,ChangeDetectionStrategy}from'@angular/core';//1. import the store moduleimport{Store}from'@ngrx/store';//2. import Observable operator for type checkingimport{Observable}from'rxjs/Observable';//3. import everything from store folderimport*asfromStorefrom'../../store';import{Pizza}from'../../models/pizza.model';import{Topping}from'../../models/topping.model'; @Component({selector: 'product-item',styleUrls: ['product-item.component.scss'],template: ` <div  class="product-item"> <pizza-form [pizza]="pizza$ | aync" [toppings]="toppings" (selected)="onSelect($event)" (create)="onCreate($event)" (update)="onUpdate($event)" (remove)="onRemove($event)"> <pizza-display [pizza]="visualise"> </pizza-display> </pizza-form> </div> `,})exportclassProductItemComponentimplementsOnInit{pizza$: Observable<Pizza>;visualise: Pizza;toppings: Topping[];// 4 inject the storeconstructor(privatestore: Store<fromStore.ProductsState>){}ngOnInit(){// 5. we want to reference the pizza$ , because we are now going to select data from the store , we're going to add this dollar suffix this.pizza$=this.store.select(fromStore.getSelectedPizza)// via the selectors we don't have to deal with the route at all, angular's route is working in the background we can use it as we like , but when it comes to components and composition of the data we can use the benefit of using the single state tree and actually use a query via selector to ask for that route state and then compose it agianst some of our entities which is exactly what we're ding here }onSelect(event: number[]){}onCreate(event: Pizza){}onUpdate(event: Pizza){}onRemove(event: Pizza){constremove=window.confirm('Are you sure?');if(remove){}}}

/* toppings.actions.ts *///1. import the action interfaceimport{Action}from'@ngrx/store';// import the topping modelimport{Topping}from'../../models/topping.model';exportconstLOAD_TOPPINGS='[Products] Load Toppings';exportconstLOAD_TOPPINGS_FAIL='[Products] Load Toppings Fail';exportconstLOAD_TOPPINGS_SUCCESS='[Products] Load Toppings Success';exportclassLoadToppingsimplementsAction{readonlytype=LOAD_TOPPINGS;}exportclassLoadToppingFailimplementsAction{readonlytype=Load_TOPPINGS_FAIL;constructor(publicpayload: any){}}exportclassLoadToppingSuccessimplementsAction{readonlytype=Load_TOPPINGS_SUCCESS;constructor(publicpayload: Topping[]){}}// in the db.json , we have the topping , each topping has an ID and has it's name . `we could expand this rach topping could have a variant of a price ,we could allow mutilple selections of extra toppings ` This data structure management will give you that capablity so you've got all of the base knowledge that you need to build out any kind of data structure in your ngrx store and learn how compose things against things like the route state and using the create selector to create your own different state selectors .exporttypeToppingsAction=|LoadToppings|LoadToppingsFail|LoadToppingsSuccess

export*from'./pizzas.action';export*from'./toppings.action';

ngOnInit(){// dispath the topping action to load the toppingsthis.store.dispatch(newfromStore.LoadTopping());this.pizza$=this.store.select(fromStore.getSelectedPizza);}

//1. import things that relate to toppings actions import*asfromToppingsfrom'../actions/toppings.action';//2. import the toppings modelimport{Topping}from'../../models/topping.model';//3. define the ToppingState interfaceexportinterfaceToppingsState{entities: {[id: number]: Topping};loaded: boolean;loading: boolean;}//4. set up the initialState: exportconstinitialState: ToppingsState={entities: {},loaded: false,loading: false};//5. set up the reducer functionexportfunctionreducer(state=initialState,action: fromToppings.ToppingsAction): ToppingsState{switch(action.type){casefromToppings.LOAD_TOPPINGS: {return{// slightly copy ...state,loading: true}}casefromToppings.LOAD_TOPPINGS_SUCCESS: {consttoppings=action.payload;constentities=toppings.reducer((entities: {[id: number]: Topping},topping: Topping)=>{return{ ...entities,[topping.id]: topping,};},{ ...state.entities})return{ ...state,loading: false,loaded: true, entities }}casefromToppings.LOAD_TOPPINGS_FAIL: {return{ ...state,loaded: false,loading: false}}}}// set up selector functionsexportconstgetToppingsEntities=(state: ToppingState)=>state.entities;exportconstgetToppingsLoaded=(state: ToppingState)=>state.loaded;exportconstgetToppingsLoading=(state: ToppingState)=>state.loading;

/* reducers/index.ts */import{ActionReducerMap,createFeatureSelector}from'@ngrx/store';import*asfromPizzasfrom'./pizzas.reducer';//1. import everything from toppings.reducer.tsimport*asfromToppingsfrom'./toppings.reducer'//2. register toppings state on our products state interface exportinterfaceProductsState{pizzas: fromPizzas.PizzaState,// our toppings is automatically going to be registered in our store module and it's automatically registered, because our reducer is constant toppings: formToppings.ToppingsState}//3. register the toppings reducer on the reducers interfaceexportconstreducers: ActionReducerMap<ProductsState>={pizzas: fromPizzas.reducer,toppings: fromToppings.reducer}exportconstgetProductsState=createFeatureSelector<ProductsState>('products');

//1. As we know an effect is an injectable , so we need to import the Injectable interfaceimport{Injectable}from'@angular/core';// 2. We can then mark our effects class as an injectable and then start using that effect decorator , So let's also import the Effect decorator import{Effect,Actions}from'@ngrx/effects';// 3. import the rxjs operator import{of}from'rxjs/observable/of';import{map,catchError,switchMap}from'rxjs/operators';// 4. import angular servicesimport*asfromServicesfrom'../../services/topping.service';// 5. import relevant actionsimport*astoppingsActionsfrom'../actions/toppings.action';// 6. set up the toppingEffects class @Injectable()exportclassToppingsEffects{constructor(privateactions$: Actions,privatetoppingsService: fromService.ToppingsService){}// 7. set up the effect observable @Effect()// the loadToppings$ name could be anything we like, but we like to keep these descriptive , so we're going to keep it as loadToppings and then we can actually deal with things like update toppings , create toppings ...loadToppings$=this.actions$.ofType(toppingsActions.LOAD_TOPPINGS).pipe(switchMap(()=>{returnthis.toppingsSerivce.getToppings().pipe(map(toppings=>newtoppingsActions.LoadToppingsSuccess(toppings)),catchError(error=>of(newtoppingsActions.LoadToppingsFail(error))));}))// Inthis effect we're only have one effect because we just care about loading toppings ， we're not in control of updating them that is not what happends in this application . However we're in control of updating , creating , and removing items form the pizza, or removing the whole pizza together . So as we continue we'll start building out the pizza effects and get a bit more depth to actually learning the efects in more detail }

import{PizzasEffects}from'./pizzas.effect';// 1. import the ToppingsEffectsimport{ToppingsEffects}from'./toppings.effect';// 2. update the effects arrayexportconsteffects: any[]=[PizzasEffects,ToppingsEffects];export*from'./pizzas.effect';// export everything from toppings.effect export*from'./toppings.effect';

//1. import createSelectorimport{createSelector}from'@ngrx/store';//2. import relevant route stateimport*asfromRootfrom'../../../app/store';//3. import the feature relevant to get getProductsStateimport*asfromFeaturefrom'../reducers';//4. import the toppings selectorsimport*asfromToppingsfrom'../reducers/toppings.reducer';//5. toppings selectorexportconstgetToppingsState=createSelector(fromFeature.getProductsState,(state: fromFeature.ProductState)=>state.toppings)//6. topping entities selectorexportconstgetToppingsEntities=createSelector(getToppingsState,fromToppings.getToppingEntities);//7. Toppings[] selectorexportconstgetAllToppings=createSelector(getToppingsEntities,(entities)=>{returnObject.keys(entities).map(id=>entities[parseInt(id,10)])})// 8. topping loaded state selectorexportconstgetToppingsLoaded=createSelector(getToppingsState,fromToppings.getToppingsLoaded)//9. topping loading state selectorexportconstgetToppingsLoading=createSelector(getToppingsState,fromToppings.getToppingsLoading)

export*from'./pizzas.selectors';// 1. export everything from toppings selectorexport*from'./toppings.selectors'

import{Component,OnInit,ChangeDetectionStrategy}from'@angular/core';import{Store}from'@ngrx/store';import{Observable}from'rxjs/Observable';import*asfromStorefrom'../../store';import{Pizza}from'../../models/pizza.model';import{Topping}from'../../models/topping.model'; @Component({selector: 'product-item',styleUrls: ['product-item.component.scss'],template: ` <div class="product-item"> <pizza-form [pizza]="pizza$ | async" [toppings]="toppings$ | async" (selected)="onSelect($event)" (create)="onCreate($event)" (update)="onUpdate($event)" (remove)="onRemove($event)"> <pizza-display [pizza]="visualise"> </pizza-display> </pizza-form> </div> `,})exportclassProductItemComponentimplementsOnInit{pizza$: Observable<Pizza>;visualise: Pizza;//2. update the toppings property to an observable propertytoppings$: Observable<Topping[]>;constructor(privatestore: Store<fromStore.ProductsState>){}ngOnInit(){this.store.dispatch(newfromStore.LoadToppings());this.pizza$=this.store.select(fromStore.getSelectedPizza);// 1. get the toppings[] from the current state tree with getAllToppings selectorthis.toppings$=this.store.select(fromStore.getAllToppings)}onSelect(event: number[]){}onCreate(event: Pizza){}onUpdate(event: Pizza){}onRemove(event: Pizza){constremove=window.confirm('Are you sure?');if(remove){}}}

import{Component,OnInit,ChangeDetectionStrategy}from'@angular/core';import{Store}from'@ngrx/store';import{Observable}from'rxjs/Observable';import*asfromStorefrom'../../store';import{Pizza}from'../../models/pizza.model';import{Topping}from'../../models/topping.model'; @Component({selector: 'product-item',styleUrls: ['product-item.component.scss'],template: ` <div class="product-item"> <pizza-form [pizza]="pizza$ | async" [toppings]="toppings$ | async" (selected)="onSelect($event)" (create)="onCreate($event)" (update)="onUpdate($event)" (remove)="onRemove($event)"> <pizza-display [pizza]="visualise"> </pizza-display> </pizza-form> </div> `,})exportclassProductItemComponentimplementsOnInit{pizza$: Observable<Pizza>;visualise: Pizza;toppings$: Observable<Topping[]>;constructor(privatestore: Store<fromStore.ProductsState>){}ngOnInit(){this.store.dispatch(newfromStore.LoadToppings());this.pizza$=this.store.select(fromStore.getSelectedPizza);this.toppings$=this.store.select(fromStore.getAllToppings)}onSelect(event: number[]){//1. console.log the data which from child component's output property ; //2. The data is a number array---> [10, 9, 3, 4, 7, 2]console.log('onSelect:::',event)}onCreate(event: Pizza){}onUpdate(event: Pizza){}onRemove(event: Pizza){constremove=window.confirm('Are you sure?');if(remove){}}}

import{Action}from'@ngrx/store';import{Topping}from'../../models/topping.model';exportconstLOAD_TOPPINGS='[Products] Load Toppings';exportconstLOAD_TOPPINGS_FAIL='[Products] Load Toppings Fail';exportconstLOAD_TOPPINGS_SUCCESS='[Products] Load Toppings success';//1. add a new Action constexportconstVISUALISE_TOPPINGS='[Products] Visualise Toppings';exportclassLoadToppingsimplementsAction{readonlytype=LOAD_TOPPINGS;}exportclassLoadToppingsFailimplementsAction{readonlytype=LOAD_TOPPINGS_FAIL;constructor(publicpayload: any){}}exportclassLoafToppingsSuccessimplementsAction{readonlytype=LOAD_TOPPINGS_SUCCESS;constructor(publicpayload: Topping[]){}}//2. add VISUALISE_TOPPINGS action creatorexportclassVisualiseToppingsimplementsAction{readonlytype=VISUALISE_TOPPINGS;//3. this number[] is given by the onSelect(event: number[]){} in products-item.component.tsconstructor(publicpayload: number[]){}}exporttypeToppingsAction=|LoadToppings|LoadToppingsFail|LoafToppingsSuccess|VisualiseToppings

import*asfromToppingsfrom'../actions/toppings.actions';import{Topping}from'../../models/topping.model';exportinterfaceToppingsState{entities: {[id: number] : Topping};loaded: boolean;loading: boolean;//1. add selectedTopping property to the ToppingState interfaceselectedToppings: number[];}exportconstinitialState: ToppingsState={entities: {},loaded: false,loading: false,//2. add the selectedTopping setted to be a empty array to the initialStateselectedToppings: []};exportfunctionreducer(state=initialState,action: fromToppings.ToppingsAction): ToppingsState{switch(action.type){//3. add VISUALISE_TOPPINGS reducer casecasefromToppings.VISUALISE_TOPPINGS: {constselectedToppings=action.payload;return{ ...state, selectedToppings }}casefromToppings.LOAD_TOPPINGS: {return{ ...state,loading: true}}casefromToppings.LOAD_TOPPINGS_FAIL: {return{ ...state,loading: false,loaded: false}}casefromToppings.LOAD_TOPPINGS_SUCCESS: {consttoppings=action.payload;constentities=toppings.reduce((entities: {[id:number]: Topping},topping: Topping)=>{return{ ...entities,[topping.id]: topping}},{...state.entities})return{ ...state,loading: false,loaded: true, entities }}}returnstate}exportconstgetToppingsEntities=(state: ToppingsState)=>state.entities;exportconstgetToppingsLoaded=(state: ToppingsState)=>state.loaded;exportconstgetToppingsLoading=(state: ToppingsState)=>state.loading;//4. add getSelectedToppings selector functionexportconstgetSelectedToppings=(state: ToppingsState)=>state.selectedToppings;

import{createSelector}from'@ngrx/store';import*asfromRootfrom'../../../app/store';import*asfromFeaturefrom'../reducers';import*asfromToppingsfrom'../reducers/toppings.reducer';exportconstgetToppingsState=createSelector(fromFeature.getProductsState,(state: fromFeature.ProductsState)=>state.toppings)//1. add getSelectedToppings selector to get the number[]exportconstgetSelectedToppings=createSelector(getToppingsState,fromToppings.getSelectedToppings)exportconstgetToppingsEntities=createSelector(getToppingsState,fromToppings.getToppingsEntities)exportconstgetAllToppings=createSelector(getToppingsEntities,(entites)=>{returnObject.keys(entites).map((id)=>{returnentites[parseInt(id,10)]})})exportconstgetToppingsLoaded=createSelector(getToppingsState,fromToppings.getToppingsLoaded)exportconstgetToppingsLoading=createSelector(getToppingsState,fromToppings.getToppingsLoading)

import{createSelector}from'@ngrx/store';import*asfromFeaturefrom'../reducers';import*asfromPizzasfrom'../reducers/pizzas.reducer';import*asfromRootfrom'../../../app/store';//1. import the toppings selector file to utilize getSelectedToppings to get the number[]import*asfromToppingsfrom'./toppings.selectors'exportconstgetPizzaState=createSelector(fromFeature.getProductsState,(state: fromFeature.ProductsState)=>state.pizzas)exportconstgetPizzasEntities=createSelector(getPizzaState,fromPizzas.getPizzasEntities)exportconstgetSelectedPizza=createSelector(fromRoot.getRouterState,getPizzasEntities,(router,entities)=>{returnrouter.state&&entities[router.state.params.PizzaId]})//2. add the new getPizzaVisualisedexportconstgetPizzaVisualised=createSelector(getSelectedPizza,fromToppings.getToppingsEntities,fromToppings.getSelectedToppings,(pizza,toppingsEntities,selectedToppings)=>{consttoppings=selectedToppings.map(id=>toppingsEntities[id]);return{ ...pizza, toppings }})exportconstgetAllPizzas=createSelector(getPizzasEntities,(entities)=>{returnObject.keys(entities).map((id)=>{returnentities[parseInt(id)];})})exportconstgetPizzasLoaded=createSelector(getPizzaState,fromPizzas.getPizzasLoaded)exportconstgetPizzasLoading=createSelector(getPizzaState,fromPizzas.getPizzasLoading)

import{Component,OnInit,ChangeDetectionStrategy}from'@angular/core';import{Pizza}from'../../models/pizza.model';import{Store}from'@ngrx/store';import{Observable}from'rxjs/Observable';import*asfromStorefrom'../../store'; @Component({selector: 'products',styleUrls: ['products.component.scss'],template: ` <div class="products"> <div class="products__new"> <a class="btn btn__ok" routerLink="./new"> New Pizza </a> </div> <div class="products__list"> <div *ngIf="!((pizzas$ | async )?.length)"> No pizzas, add one to get started. </div> <pizza-item *ngFor="let pizza of (pizzas$ | async )" [pizza]="pizza"> </pizza-item> </div> </div> `,})exportclassProductsComponentimplementsOnInit{pizzas$: Observable<Pizza[]>;constructor(privatestore: Store<fromStore.ProductsState>){}ngOnInit(){this.pizzas$=this.store.select(fromStore.getAllPizzas);this.store.dispatch(newfromStore.LoadPizzas());// dispatch the LoadToppings actionthis.store.dispatch(newfromStore.LoadToppings());}}

import{Component,OnInit,ChangeDetectionStrategy}from'@angular/core';import{Store}from'@ngrx/store';import{Observable}from'rxjs/Observable';import*asfromStorefrom'../../store';//1. import the tap(窃听) operator import{tap}form'rxjs/operators';import{Pizza}from'../../models/pizza.model';import{Topping}from'../../models/topping.model'; @Component({selector: 'product-item',styleUrls: ['product-item.component.scss'],template: ` <div class="product-item"> <pizza-form [pizza]="pizza$ | async" [toppings]="toppings$ | async" (selected)="onSelect($event)" (create)="onCreate($event)" (update)="onUpdate($event)" (remove)="onRemove($event)"> <pizza-display [pizza]="visualise$ | async"> </pizza-display> </pizza-form> </div> `,})exportclassProductItemComponentimplementsOnInit{pizza$: Observable<Pizza>;visualise$: Observable<Pizza>;toppings$: Observable<Topping[]>;constructor(privatestore: Store<fromStore.ProductsState>){}ngOnInit(){// 2. remove this dispatch action// this.store.dispatch(new fromStore.LoadToppings());//3. update the this.pizza$ 及当路由到product-item 页面的时候， 如果selected pizza 拥有 toppings 则将这些tappings 渲染出来；this.pizza$=this.store.select(fromStore.getSelectedPizza).pipe(tap((pizza: Pizza=null)=>{constpizzaExists=!!(pizza&&pizza.tappings);consttoppings=pizzaExists ? pizza.toppings.map(topping=>topping.id) :[];this.store.dispatch(newfromStore.visualiseToppings(toppings))}));this.toppings$=this.store.select(fromStore.getAllToppings);//3. update the visualise propertythis.visualise$=this.store.select(fromStore.getPizzaVisualised)}onSelect(event: number[]){//4. when user toggle the toppings button trick this dispatch action 当用户 改变pizza 对应的toppings 的时候，可以试试的去改变；// console.log('onSelect:::', event)this.store.dispatch(newfromStore.visualiseToppings(event));}onCreate(event: Pizza){}onUpdate(event: Pizza){}onRemove(event: Pizza){constremove=window.confirm('Are you sure?');if(remove){}}}

import{Action}from'@ngrx/store';import{Pizza}from'../../models/pizza.model';exportenumPizzaActionTypes{LOAD_PIZZAS='[Products] Load Pizzas',LOAD_PIZZAS_FAIL='[Products] Load Pizzas Fail',LOAD_PIZZAS_SUCCESS='[Products] Load Pizzas success'}exportclassLoadPizzasimplementsAction{readonlytype=PizzaActionTypes.LOAD_PIZZAS;}exportclassLoadPizzasFailimplementsAction{readonlytype=PizzaActionTypes.LOAD_PIZZAS_FAIL;constructor(publicpayload: any){}}exportclassLoadPizzasSuccessimplementsAction{readonlytype=PizzaActionTypes.LOAD_PIZZAS_SUCCESS;constructor(publicpayload: Pizza[]){}}//1. Add create pizza action const string exportconstCREATE_PIZZA='[Products] Create Pizza';exportconstCREATE_PIZZA_FAIL='[Products] Create Pizza Fail';exportconstCREATE_PIZZA_SUCCESS='[Products] Create Pizza Success';//2. add create pizza action creatorexportclassCreatePizzaimplementsAction{readonlytype=CREATE_TYPE;constructor(publicpayload: Pizza){}}exportclassCreatePizzaFailimplementsAction{readonlytype=CREATE_PIZZA_FAIL;constructor(publicpayload: any){};}exportclassCreatePizzaSuccessimplementsAction{readonlytype=CREATE_PIZZA_SUCCESS;constructor(publicpayload: Pizza){};}//3. add the create class to PizzasActionexporttypePizzasAction=|LoadPizzas|LoadPizzasFail|LoadPizzasSuccess|CreatePizza|CreatePizzaFail|CreatePizzaSuccess

/* products/store/effects/pizzas.effect.ts */import{Injectable}from'@angular/core';import{Actions,Effect}from'@ngrx/effects';import*aspizzaActionsfrom'../actions/pizzas.action';import*asfromServicefrom'../../services';import{switchMap,map,catchError}from'rxjs/operators';import{of}from'rxjs/observable/of'; @Injectable()exportclassPizzasEffects{constructor(privateactions$: Actions,privatepizzasService: fromService.PizzasService){} @Effect()loadPizzas$=this.actions$.ofType(pizzaActions.PizzaActionTypes.LOAD_PIZZAS).pipe(switchMap(()=>{returnthis.pizzasService.getPizzas().pipe(map(pizzas=>newpizzaActions.LoadPizzasSuccess(pizzas)),catchError(error=>of(newpizzaActions.LoadPizzasFail(error))));}));// 1. add CreatePizza$ effect @Effect()createPizzza$=this.actions$.ofType(pizzaActions.CREATE_PIZZA).pipe(map((action: pizzaActions.CreatePizza)=>{returnaction.payload}).switchMap(pizza=>{returnthis.pizzasService.createPizza(pizza).pipe(map(pizza=>{console.log(pizza);returnnewpizzaActions.CreatePizzaSuccess(pizza)}),catchError(error=>of(newpizzaActions.CreatePizzaFail(error))))}))}

import{Pizza}from'../../models/pizza.model';import*asfromPizzasfrom'../actions/pizzas.action';exportinterfacePizzaState{entities: {[id: number]: Pizza}loaded: boolean;loading: boolean;}exportconstinitialState: PizzaState={entities: {},loaded: false,loading: false};exportfunctionreducer(state=initialState,action: fromPizzas.PizzasAction): PizzaState{switch(action.type){casefromPizzas.PizzaActionTypes.LOAD_PIZZAS: {return{ ...state,loading: true}}casefromPizzas.PizzaActionTypes.LOAD_PIZZAS_SUCCESS: {constpizzas=action.payload;constentities=pizzas.reduce((entities: {[id: number]: Pizza},pizza: Pizza)=>{return{ ...entities,[pizza.id]: pizza}},{ ...state.entities})return{ ...state,loading: false,loaded: true, entities }}casefromPizzas.PizzaActionTypes.LOAD_PIZZAS_FAIL: {return{ ...state,loading: false,loaded: false}}//1. add CREATE_PIZZA_SUCCESS reducercasefromPizzas.CREATE_PIZZA_SUCCESS: {constpizza=action.payload;constentities={ ...state.entities,[pizza.id]: pizza}return{ ...state, entities }}}returnstate;}exportconstgetPizzasEntities=(state: PizzaState)=>state.entities;exportconstgetPizzasLoaded=(state: PizzaState)=>state.loaded;exportconstgetPizzasLoading=(state: PizzaState)=>state.loading;

// add the dispatch actiononCreate(event: Pizza){this.store.dispatch(newfromStore.CreatePizza(event));}

// add action constant exportconstUPDATE_PIZZA='[Products] Update Pizza';exportconstUPDATE_PIZZA_FAIL='[Products] Update Pizza Fail';exportconstUPDATE_PIZZA_SUCCESS='[Products] Update Pizza Success';//add new action creatorexportclassUpdatePizzaimplementsAction{readonlytype=UPDATE_PIZZA;constructor(publicpayload: Pizza){}}exportclassUpdatePizzaFailimplementsAction{readonlytype=UPDATE_PIZZA_FAIL;constructor(publicpayload: any){}}exportclassUpdatePizzaSuccessimplementsAction{readonlytype=UPDATE_PIZZA_SUCCESS;constructor(publicpayload: Pizza){}}// add new typeexporttypePizzaAction=|LoadPizzas|LoadPizzasFail|LoadPizzasSuccess|CreatePizza|CreatePizzaFail|CreatePizzaSuccess|UpdatePizza|UpdatePizzaFail|UpfatePizzaSuccess;

import{Injectable}from'@angular/core';import{Actions,Effect}from'@ngrx/effects';import*aspizzaActionsfrom'../actions/pizzas.action';import*asfromServicefrom'../../services';import{switchMap,map,catchError}from'rxjs/operators';import{of}from'rxjs/observable/of'; @Injectable()exportclassPizzasEffects{constructor(privateactions$: Actions,privatepizzasService: fromService.PizzasService){} @Effect()loadPizzas$=this.actions$.ofType(pizzaActions.PizzaActionTypes.LOAD_PIZZAS).pipe(switchMap(()=>{returnthis.pizzasService.getPizzas().pipe(map(pizzas=>newpizzaActions.LoadPizzasSuccess(pizzas)),catchError(error=>of(newpizzaActions.LoadPizzasFail(error))));})); @Effect()createPizza$=this.actions$.ofType(pizzaActions.PizzaActionTypes.CREATE_PIZZA).pipe(map((action: pizzaActions.CreatePizza)=>{returnaction.payload}),switchMap((pizza)=>{returnthis.pizzasService.createPizza(pizza).pipe(map(pizza=>{console.log(pizza);returnnewpizzaActions.CreatePizzaSuccess(pizza)}),catchError(error=>of(newpizzaActions.CreatePizzaFail(error))))}))// add UPDATE_PIZZA effect @Effect()updatePizza$=this.action$.ofType(pizzaActions.UPDATE_PIZZA).pipe(map((action: pizzaActions.UpdatePizza)=>{returnaction.payload}),switchMap(pizza=>{returnthis.pizzaService.updatePizza(pizza).pipe(map(pizza=>newpizzaActions.UpdatePizzaSuccess(pizza)),catchError(error=>of(newpizzaActions.UpdatePizzaFail(error))));}))}