ngrx/store not working when loading hardcoded data

Question

I'm trying to use ngrx/store in my Angular app for hours and I can't figure out what I'm doing wrong. It seems like my store items never get updated.

Here is my Store interface:

export interface ItemStore{
    items: Item[];
}

Item is a custom object - here is the model:

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

I have a service that acts as a central hub that contain the main 'items' array and a function 'loadItems()' that loads the data (called from another component):

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

and here is my main app component that calls 'loadItems';

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

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

here is my reducer function:

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

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

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

and the html I am using to test to see if 'items' is ever updated (it's a simple div that draws a specific number of buttons based on the size of items, which after running my code and loading the manual data should be 2):

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

Any idea what is going on? I'm completely new to ngrx/store and the tutorials I've read haven't been too helpful - they all seem to have syntax errors and are sometimes outdated.

There isn't an error, but the way I thought this would work isn't. From my understanding of the ngrx/store docs, after running the code above, I should see two buttons displayed by my html, but I don't see any. When the app loads, the main app component calls 'loadItems' which calls the store's dispatch method WITH the proper action and hardcoded payload data (2 item objects). After that, 'items' should now have 2 Item objects, and therefore I should see 2 buttons in my html. — Roka545
where do you call the loadItems i dnt see a call in the component — Rahul Singh
@RahulSingh Oops, sorry about that - forgot to put that in (I've stripped my code down for clarification - I've added it in the proper location). I call it inside my main app component's constructor. — Roka545

Aravind Aravind · Accepted Answer · 2017-07-15T23:30:33

You are not subscribing to the store instance items,

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

The data should be logged more than once.

ngrx/store not working when loading hardcoded data

2 Answers