Question

我试图在我的Angular应用中使用ngrx / store几个小时，我无法弄清楚我做错了什么。好像我的商店商品永远不会更新。

这是我的商店界面：

export interface ItemStore{
    items: Item[];
}

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

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

我有一项服务，作为一个中心枢纽，包含主要的＆＃39;项目＆＃39;数组和函数＆＃39; loadItems（）＆＃39;加载数据（从另一个组件调用）：

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

这是我的主要应用程序组件，它调用了＆＃39; loadItems＆＃39;;

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

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

这是我的reducer功能：

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

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

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

和我用来测试的html，看看＆＃39;项目＆＃39;永远更新（它是一个简单的div，它根据项目的大小绘制特定数量的按钮，在运行我的代码并加载手动数据后应为2）：

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

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

Answer 1

您尚未订阅商店实例items，

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

应该多次记录数据。

Answer 2

您使用ChangeDetectionStrategy.OnPush吗？

如果是这样，那么对你的状态的引用永远不会改变，所以没有检测到也没有显示的变化。

您的reducer功能不仅应该覆盖您的状态值，还应该覆盖它的引用，以便更改检测以获取它。类似的东西：

return Object.assign({}, actionPayload);

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

加载硬编码数据时，ngrx / store无法正常工作

2 个答案: