0

我试图在我的 Angular 应用程序中使用 ngrx/store 几个小时，但我不知道我做错了什么。我的商店商品似乎永远不会更新。

这是我的商店界面：

export interface ItemStore{
    items: Item[];
}

Item 是一个自定义对象 - 这是模型：

export interface Item {
    id: number;
    name: string;
    description: string;
};

我有一个作为中央集线器的服务，它包含主要的“项目”数组和一个加载数据的函数“loadItems()”（从另一个组件调用）：

@Injectable()
export class ItemsService {
     items: Observable<Array<Item>>;

     constructor(private http: Http, private store: Store<ItemStore>) {
          this.items = store.select<Array<Item>>('items');
          itemsService.loadItems();
     }
}

loadItems() {
    let initialItems: Item[] = [
        {
            id: 1,
            name: "Item1",
            description: "Description 1"
        },
        {
            id: 2, 
            name: "Item2",
            description: "Description 2"
        }
    ];
    this.store.dispatch({ type: 'LOAD_ITEMS', payload: initialItems });
}

这是我调用'loadItems'的主要应用程序组件；

export class HomeComponent implements OnInit {
     items: Observable<Array<Item>>;

     constructor(private itemService: ItemService, private store: Store<ItemStore>) {
          this.items = itemsService.items;
     }
}

这是我的减速器功能：

export const itemsReducer = (state: any, action: Action) => {

    if (state == null) state = [];

    switch (action.type) {
        case 'LOAD_ITEMS':
            return action.payload;
        default:
            return state;
    }
};

以及我用来测试“项目”是否已更新的 html（它是一个简单的 div，它根据项目的大小绘制特定数量的按钮，在运行我的代码并加载手动数据后应该是 2） ：

        <div *ngFor="let item of items | async">
            <button type="button" pButton icon="fa-check" label=Item: {{item.description}}></button>
        </div>

知道发生了什么吗？我对ngrx/store 完全陌生，我读过的教程并没有太大帮助——它们似乎都有语法错误，有时已经过时了。

4

2 回答 2

1

您没有订阅商店实例items，

this.store.select('items').subscribe(data => { console.log(data)});

应多次记录数据。

于 2017-07-15T23:30:33.220 回答
0

你使用 ChangeDetectionStrategy.OnPush 吗？

如果是这样，那么对您的状态的引用永远不会改变，因此不会检测到或显示任何更改。

您的 reducer 函数不仅应该覆盖您的状态值，而且还应该覆盖它的引用，以便更改检测能够获取它。就像是：

return Object.assign({}, actionPayload);

这将覆盖状态值并将其克隆到创建新引用的新对象，然后更改检测可以将其拾取。

于 2017-07-13T05:59:43.747 回答