傳遞多個reducer以角色2存儲（ngrx/store）與打字稿？

Question

我想通過多個reducer功能存儲在角2中。我試過了，但我不知道它是否正確或不正確？像：

@NgModule({ 
    imports: [ StoreModule.provideStore({todo: appStore, selectedTodo: todoSelector}, {todo: [], selectedTodo: {}}) ], 
    declarations: [ ... ], 
    providers: [ ...], 
    bootstrap: [ ...] 
}) 
export class AppModule{} 

這裏，AppStore的 - 返回todolist的和todoSelector - 返回選定待辦事項細節減速，如：

export const appStore: ActionReducer<Todo[]> = (state: Todo[] = [], action: Action) => { 
    switch (action.type) { 
     case GET_LIST: return action.payload; 
     default: return state; 
    } 
} 

export const todoSelector: ActionReducer<Todo> = (state: Todo, action: Action) => { 
    switch (action.type) { 
     case GET_DETAILS: return action.payload; 
     default: return state; 
    } 
} 

在根組件，我用店裏像這樣：

export class AppComponent{ 
    private seletedTodo:Todo; 
    private $todoList: Observable<number>; 

    constructor(private _todoService: TodoService, private _store: Store<number>){ 
     ... 
     this.$todoList = this._store.select('todo'); 
     this._store.select('selectedTodo').subscribe(todo => this.seletedTodo = todo); 
    } 

    onSelection(data: Todo){ 
     this._store.dispatch({type: 'GET_DETAILS', payload: data}); 
    } 
} 

是對的wa Ÿ做或不做？

Answer 1

我相信當你引導使用StoreModule.provideStore()您的應用程序，你需要準確地引用減速的名字：

imports: [ StoreModule.provideStore({appStore, todoSelector} ], 

當這個被處理時，減速都拉到一起，所以他們的訪問ngrx商店。當調用GET_LIST時，與GET_LIST動作相關聯的state將受到影響，並且在調用GET_DETAILS時與GET_DETAILS動作相關的狀態將受到影響。在每個reducer定義中，您將state設置爲一個空數組，因此每個reducer的狀態都會引用它們各自的數組。這兩個數組都可以在商店中找到。減速器的名稱是你如何參考state的特定片段，所以你可以做類似下面的事情（爲了示例的目的，我已經簡化了一些，但刪除了我所做的部分不一定是我的建議動作）：

export class AppComponent { 
    private _todoList; 
    private _appStore; 

    constructor(private _store: Store<any>) { 
     this._todoList = this._store.select('todoSelector'); 
     this._appStore = this._store.select('appStore'); 
    } 

    onSelection(data: Todo){ 
     this._store.dispatch({type: 'GET_DETAILS', payload: data}); 
    } 
} 

在模板中，你現在可以使用async管引用this._todoList和this._appStore數據。

[todoList]="_todoList | async" 
[appStore]="_appStore | async" 

以及接收todoList和appStore將具有從每個數據的實時更新進料的子組件。如果它們發生更改，它將傳播到它們所使用的子組件。要允許它們傳遞給子組件，請在子組件定義中使用裝飾器@Input。

如果您希望appStore減速器引用單個待辦事項，請更改減速器名稱以更好地適用它。

如果您還有其他問題，請發佈他們，我會盡我所能提供我的答案。