Question

我想传递多个reducer函数以角度2存储。我试过了，但我不知道它是否正确？喜欢：

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

这里， appStore - 返回todolist和 todoSelector - 返回选定的待办事项详情 reducers ，如：

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;
    }
}

在root组件中，我使用了这样的商店：

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});
    }
}

这样做是否正确？

Answer 1

我相信当您使用StoreModule.provideStore()引导您的应用时，您需要准确引用Reducer的名称：

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

处理完毕后，减速器全部拉在一起，因此ngrx商店可以访问它们。调用state时，与GET_LIST操作关联的GET_LIST会受到影响，并且在调用GET_DETAILS时，与GET_DETAILS操作关联的状态会受到影响。在每个reducer定义中，将state设置为空数组，因此每个的状态将引用它们各自的数组。两个阵列都可以在商店本身使用。减速器的名称是你如何引用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减速器引用单个Todo，请更改减速器名称以更好地适应它。

如果您有其他问题，请发布，我会尽我所能地答复我的答案。

通过打字稿传递多个Reducer以存储角度2（ngrx / store）？

1 个答案: