ngrx / store инициализирует Observable @Input

Question

Как мне инициализировать шаблон с помощью свойства @Input, используя ngrx / store? Когда я тестировал функцию addCategory, она работает как положено, но я хочу отобразить начальное состояние, которое я объявил в редукторе в классе инициализации.

reducer.ts:

export interface AppState {
  categoryState: AdminCategory[]
}

export class AdminCategory {
  id: number;
  name: string;
  parentId: number;

  constructor(id: number, name: string, parentId: number) {
    this.id = id;
    this.name = name;
    this.parentId = parentId;
  }
}

export const ADD_CATEGORY = 'ADD_CATEGORY';
export const REMOVE_CATEGORY = 'ADD_CATEGORY';

export class AddCategory implements Action {
  readonly type = ADD_CATEGORY;

  constructor(public payload: AdminCategory) { }
}

export class RemoveCategory implements Action {
  readonly type = REMOVE_CATEGORY;

  constructor(public payload: AdminCategory) { }
}

export type CategoryActions = AddCategory | RemoveCategory

export function categoryReducer(state: AdminCategory[] = [new AdminCategory(1, "asd", 0)], action: CategoryActions) {
  switch (action.type) {
    case ADD_CATEGORY:
      return [...state, action.payload];
    default: state;
  }
}

дерево-view.ts:

@Component({
  selector: 'categories',
  template: `
     <div *ngFor="let cat of categories | async">
      <ul>
       <li>
         <span (click)="addCategory(cat)">{{cat.name}}</span>
       </li>
      </ul>
    </div>
  `
})

export class TreeView implements OnInit {

  @Input() categories: Observable<AdminCategory[]>

  constructor(private store: Store<AppState>, private dialog: MatDialog) {}

  ngOnInit() {
    this.categories = this.store.select('categoryState');
  }

  addCategory(category: AdminCategory) {
    this.store.dispatch(new AddCategory(category));
  }
}

Я не выдает никаких ошибок, просто ничего не происходит.

Answer 1

Я действительно не знаю, к чему вы клоните, но я думаю, что это похоже на то, что вы хотели достичь: https://stackblitz.com/edit/angular-2fukcm

Я предполагаю, что вы хотите иметь возможность развернуть дерево на каждом узле. У меня есть приблизительное представление о том, что вы должны делать, но я позволю вам продолжить, как здесь, и посмотрим, что вы найдете.

Кстати, в вашем стеке, у вас не было <categories></categories> в компоненте приложения. Кроме того, в вашем состоянии по умолчанию отсутствует «return»:

export function categoryReducer(state: AdminCategory[], action: CategoryActions) { switch (action.type) { case ADD_CATEGORY: return createTreeRecursive([...state, action.payload], 0); default: return state; } }