NgRX store, issues fetching data

user_6585995 0
Viewed 229

I have been doing some tests with ngrx store but having some issues:

mainly around fetching the information from the store.

You can see my code here https://github.com/FabioBiao/ngrxtTest

On the home.component.ts i try to get the contents of the store. However I'm getting a object with the name of the store and inside that object its contents.

        store.pipe(select(getCart)).subscribe((data) => {
            console.log('load finish on component');
            console.log(data);
            if (data && data['shop']) {
                console.log(data['shop']);
                this.items = data['shop'].items;
            }

I was expecting to get the content inside the store right away, but instead i need to do data['shop'] to get the store data. What have i missed for this to work in a better way?

I also tried using this

this.getItemsList = store.select(getItemsList);

with this selector:

const shopFeatureState = createFeatureSelector<StoreState>('myshop');
export const getItemsList = createSelector(
    shopFeatureState,
    state => state.items
);

But its retuning the object store. I need to subscribe to itto get the content inside the store object. Is this also the correct way?

Thanks for the help

ngrx angular
2 Answers

Seems like the problem is in your selector functions since they are currently returning the whole state. You can redefine selectors like this:


import { StoreState } from './reducer';
import { createSelector, Store, createFeatureSelector } from '@ngrx/store';

//getting the whole store
export const selectStoreState = (state: StoreState) => state;
export const getStore = createSelector(selectStoreState, state => state);

//getting the items from the store state
export const selectStoreItems = (state: StoreState) => state.items;
export const getCartList = createSelector(selectStoreItems, state => state);

//getting the cart from the store state
export const selectStoreCart = (state: StoreState) => state.cart;
export const getCart = createSelector(selectStoreCart, (state) => {
    console.log('selector Cart');
    console.log(state);
    return state;
});
user_167073050

You need to add a new selector selectShopState that will point to the shop state, then pass it to the getCart to get the instance of your state within this selector.

Your selector file should look like the following:

import { StoreState } from "./reducer";
import { createSelector, Store, createFeatureSelector } from "@ngrx/store";

// >>>>> 1- Create the shop selector <<<<<<<
export const selectShopState = createFeatureSelector<StoreState>("shop");

//getting the whole store
export const selectStoreState = (state: StoreState) => state;
export const getStore = createSelector(selectStoreState, (state) => state);

//getting the items from the store state
export const selectStoreItems = (state: StoreState) => state.items;
export const getItemList = createSelector(selectStoreItems, (state) => state);

//getting the cart from the store state
export const selectStoreCart = (state: StoreState) => state.cart;

// >>>> 2- Then pass it here to get the instance of your shop state <<<<<
export const getCart = createSelector(selectShopState, (state) => {
  console.log("selector Cart");
  console.log(state);
  return state;
});
user_151596030
Related