@ NGRX /存储不订阅正确选择

Question

我已经创建了下面的角2应用程序与@ NGRX /店，@ NGRX/efffects

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    SharedModule, 
    StoreModule.provideStore({mainStoreReducer}), 
    EffectsModule.run(MainEffects) 


    ], 
    providers: [ 
    StompService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

export interface State { 
    counter: number; 
    persons: any[]; 
    personsLoaded : boolean; 
} 

export const initialState: State = { 
    counter: 10, 
    persons: [], 
    personsLoaded: false, 
}; 


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    title = 'app works!'; 
    data$; 
    persons$; 
    personForm: Person = <Person>{}; 

    persons = []; 
    // state: State; 

    constructor(private store: Store<State>, 
       private http: Http, 
       private stomp: StompService) { 
    // console.log(`We have a store! ${store}`); 
    this.store.dispatch(CounterService.requestUsers); 

    this.persons$ = store.select((state: State) => state.persons); 
    this.data$ = store.select((state: State) => `Data is: ${state.counter}`); 

    } 
} 

export interface Person { 
    name: string, 
    surname: string 
} 

<ul> 
    <li *ngFor="let person of persons$ | async; let i = index">{{i}}. {{person.name}} {{person.surname}}</li> 
</ul> 

@Injectable() 
export class MainEffects { 

    constructor(private action$: Actions, 
       private http: Http) { 
    } 

    @Effect() users$ = this.action$.ofType(CounterService.REQUEST_USERS) 
    .switchMap(() => this.http.get("api/persons")) 
    .map(res => res.json()) 
    .map(json => json._embedded.persons) 
    .do(json => console.log(json)) 
    .switchMap(result => Observable.of(CounterService.receivedUsers(result))); 
} 


export const mainStoreReducer: ActionReducer<State> = 
    (state = initialState, action: Action) : State => { 

    console.log(`Action came in ! ${action.type}`); 

    switch (action.type) { 

     case CounterService.RECEIVED_USERS: { 
     return { 
      counter: state.counter, 
      persons: action.payload, 
      personsLoaded: true 
     }; 
     } 
     case CounterService.REQUEST_USERS: { 
     console.log("requested users"); 
     return state; 
     } 
     default: { 
     return state; 
     } 
    } 
    }; 

好了，所以似乎与这些线路的问题：

`StoreModule.provideStore({mainStoreReducer})` and 

this.persons$ = store.select((state: State) => state.persons);

当我使用{}mainStoreReducer选择似乎并没有正常工作。但是，如果我做StoreModule.provideStore(mainStoreReducer)那么它奇迹般地工作！显然，我不能这样做，因为那只是一个减速器，所以在一个正常的项目中我会有多个减速器。

任何人都有一个想法出了什么问题。如果你喜欢，请直接看看github项目https://github.com/cgeo7/ngrx_tests_websockets_spring-boot 它的构建正常。

编辑：我做了这些修改，但我看到问题是状态具有reducer对象在层次结构的第一级，它包含实际状态。此外，如果我添加第二个减速器，则永远不会像mainStoreReducer那样进行初始化。有你需要的减速导出到单一的“减速”有鬼这里

Answer 1

首先，在这之后，你应该做的：StoreModule.provideStore（减速）。

入住此回购： https://github.com/onehungrymind/angular-applied-dashing/blob/master/src/app/common/reducers/index.ts

Answer 2

你需要（键，值）对用于提供存储，以便你可以做以下代替

StoreModule.provideStore( { mainStore: mainStoreReducer, anotherStore: anotherStoreReducer })

但正如@coskun说你应该创建一个单独的文件并将缩减器合并到一个简化器中，然后将其导入到您的应用程序组件中。希望这会有所帮助。