Question

我是ngrx商店的新手，我无法解决如何有效地将我的应用程序状态与驱动我的组件的静态对象结合起来的问题。

items.ts

export class Item {
    id: number;
    name: string;
    count: number;
    need: number;
}

export class ItemState {
    id: number;
    count: number;
}

export class ItemStateAction implements Action {
    type: string;
    id: number;
    count: number;
}

export function itemReducer(
    state: ItemState,
    action: ItemStateAction
) {
    switch (action.type) {
        case SET_VALUE:
            if (state.id === action.id) {
                return (state. = action.count);
            }
        default:
            return state;
    }
}

我正在创建一个具有预定义项目列表的应用，允许用户调整每个项目的数量。

我有ItemListComponent负责从ItemService获取项目，该项目只返回从静态文件导入的Observable<Item[]>。

item.service.ts

...
import { Item } from "./item";
import { ITEMS } from "./static-items";

@Injectable()
export class ItemService {
    constructor() {}

    getItems(): Observable<Item[]> {
        return of(ITEMS);
    }
}

项-list.component.ts

...
import { ItemService } from "../item.service";
import { Item } from "../item";

export class ItemListComponent implements OnInit {
    items: Item[];

    constructor(private itemService: ItemService) {}

    ngOnInit() {
        this.getItems();
    }

    getItems(): void {
        this.itemService
            .getItems()
            .subscribe(items => (this.items = items));
    }
}

我应该在商品列表（父）组件中查询商店，并将Observable<Item[]>与商店中的Observable<ItemState[]>合并吗？或者我应该使用静态项并在商品子组件中查询商店的特定项状态？我知道子组件应该是“哑”，所以后者似乎与此相反。

我也在另一个结构的一部分中使用Item s，其中一个子集包含在数组中。

另一种观点的模型：

export class Requirement {
    id: number;
    items: Item[];
}

//example
//Requirement[] = [ {'id': 1, items: [{'id': 1, 'name': 'Apple', need: 3, count: 0}] },
//  {'id': 2, items: [{'id': 1, 'name': 'Apple', need: 2, count: 0}] }]

对于这个结构，我必须从商店获取商品状态，然后为每个需求中的每个商品分配计数，或者每次呈现商品子组件时查询商店以获得准确的计数。这种事情有“最佳实践”吗？对不起，如果这个太不清楚或不完整。

Answer 1

在您的服务中，您需要从ngrx

导入商店

import { Store } from "@ngrx/store"
@Injectable()
export class MyService {

constructor(private store: Store<any>) { }

getItems() {
   return this.store.select("items")
}
}

getItems方法将从商店中选择商品列表。 “items”应该在模块声明

中定义为商店的一部分如果声明一个包含与reducer中的操作匹配的类型操作的类（SET_VALUE）

，则更改商店的状态会更好

export class SetValue implements Action {
    readonly type = SET_VALUE
    constructor(public value: any) { }
}

然后要调用此操作，您只需声明类操作并传递给商店

setValue(value:any) {
    this.store.dispatch(new SetValue(value))
  }

你的减速器看起来像

export function itemReducer(
    state: ItemState = staticValues,
    action: ItemStateAction
) {
    switch (action.type) {
        case SET_VALUE:
            if (state.id === action.id) {
                return (state. = action.count);
            }
        default:
            return state;
    }
}

这就是我通常做的事情，请告诉我是否澄清了你的问题

使用ngrx / store

1 个答案: