CODEWITHSUNDEEP
angulartypescriptreduxngrxngrx-store
Roka545
Roka545

Reputation: 3626

ngrx/store not working when loading hardcoded data

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.

Upvotes: 0

Views: 761

Answers (2)

Aravind
Aravind

Reputation: 41533

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.

Upvotes: 1

tlt
tlt

Reputation: 15191

Do you use ChangeDetectionStrategy.OnPush?

If so, then the reference to your state never changes so there is no change to be detected nor shown.

Your reducer function should not only overwrite your state value but its reference also in order for change detection to pick it up. Something like:

return Object.assign({}, actionPayload);

This overwrites the state value and clones it to a new object which creates new reference and then change detection can pick it up.

Upvotes: 0

Related Questions