Was ist der beste Weg, um rxjs store in angular2/4 einzubinden, sollte es im Bootstrap oder Import sein?

Question

Wenn ich lese über NGRX, sehe ich verschiedene Möglichkeiten, einschließlich Shop:

Ein Weg, ich sehe, ist bei den Importen enthalten:

@NgModule({ 
    imports: [ 
     ... omitted 
     StoreModule.provideStore(AppReducer), 
    ], 
    declarations: [ 
     AppComponent 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

Der andere Weg, den ich gesehen habe, ist es enthalten in Bootstrap:

import {bootstrap} from 'angular2/platform/browser'; 
import {App} from './src/app'; 
import {provideStore} from '@ngrx/store'; 
import {ItemsService, items, selectedItem} from './src/items'; 
bootstrap(App, [ 
    ItemsService, // The actions that consume our store 
    provideStore({items, selectedItem}) // The store that defines our app state 
]) 
.catch(err => console.error(err)); 

Welche ist korrekt und/oder ist die bewährte Best Practice? Warum?

Ich sehe eine zufällige app.module.ts Datei aus einem Projekt ohne rxjs Laden und frage mich, wo es richtig in einer Datei wie folgt gehen sollte:

https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/app/app.module.ts 

Schätzen alle optional alle Verweise auf wie " aktuelle "Mai 2017 eckige2/4-Anwendungen sollten in Bezug auf die Integration mit RxJS organisiert werden.

Answer 1

Ich möchte mein AppModule so sauber wie möglich halten.

Eines Tages, während ich viel über Modulstruktur und SPA-Design mit Angular dachte, habe ich ein Tweet von Wassim Chegnam gesehen. Es ging um Module mit kantigem, und er zog dies:

Ich mochte die Idee von mit 3 Hauptmodule wirklich:
- verfügt
-
geteilt - Kern

Wie man sie benutzt:

• Eigenschaften für alles direkt an unsere App im Zusammenhang
• Geteilt für alles, was wir von überall her
• Kern für alles, was im Zusammenhang mit der Projektkonfiguration (meist Module mit forRoot)

auf einfache Weise importieren möchten

Also in Ihrem Fall würde ich die StoreModule.provideStore(AppReducer) in CoreModule setzen. (example)

Offensichtlich Sie mit einer einfacheren Modulstruktur gehen können, aber nachdem ich auf diese Weise verwenden die Dinge in einem large application und einem kleinen/mittleren App Demo zu tun, wie NGRX (Pizza-Sync) zu verwenden, fühlte es mich wie eine gute Sache =).

Am Ende, ich habe eine AppModule wirklich sauber:

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    CoreModule, 
    SharedModule, 
    AppRoutingModule 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

und wenn ich Winkel universell zu verwenden brauchen würde ich kein Problem app.module.ts-app.module.universal.ts zu wechseln.

Edit: 14. Mai (2017)
veröffentlichte ich ein paar Tagen ein NGRX Starter auf Github, wo ich versuche all das und beinhalten eine Menge guter Dinge zu beschreiben, die ich für die Entdeckung habe letzten 8 Monaten. Es könnte einige von Ihnen interessieren: https://github.com/maxime1992/angular-ngrx-starter

Answer 2

Nach den Beispielen aus der ngrx Repo, biete ich den Laden unter imports.

Example in readme in the ngrx repo:

@NgModule({ 
    imports: [ 
    BrowserModule, 
    StoreModule.provideStore({ counter: counterReducer }) 
    ] 
}) 

Die Official NGRX Example App tut auch das Gleiche. Es setzt es unter imports.

Mir sind keine Unterschiede bekannt, wenn ich Sachen unter bootstrap setze, aber es scheint mir sauberer zu sein, es in die NgModule imports Abteilung zu trennen.