CODEWITHSUNDEEP
angularngrx
Forrest Murray
Forrest Murray

Reputation: 89

angular 2 ngrx/store unavailable data breaks async pipe

If my initial state is something like 

export const initialState: State = {
  release: '',
  shape: '',
  story: '',
  keyFeatures: [''],
  colors: []
};

export function reducer(state = initialState, action): State {
    switch(action.type) {
        case "UPDATE_PRODUCT": return Object.assign({}, action.payload || state);
        case "UPDATE_COLOR": 
            return Object.assign({}, state, {currentColor: action.payload.currentColor, imagePaths: action.payload.imagePaths})
        default:
            return state;
    }
}

and the the component is consuming the state like this 

<img class="glassesImg" [images]="paths | async" >

_store.select('product')
      .subscribe((product: State) => {
        this.collection = product.collection;
        this.release = product.release;
        this.sku = product.sku;
        this.paths = product.imagePaths;
    })

I'm getting the error "Invalid argument '' for pipe 'AsyncPipe'" when there isn't any available data. I'd expect that the AsyncPipe simply can subscribe to '' as a valid string value for that property? What am I missing?

Upvotes: 0

Views: 205

Answers (1)

Paul Samsotha
Paul Samsotha

Reputation: 209012

Why do you need the async pipe with normal sync values? async needs to be used with Observable or Promise, but paths is just a normal value type.

If you want to use async, you could do something like

<something [blah]="(model$ | async)?.someProperty">

class Component {
  model$
  ...
  this.model$ = store.select(..)
}

Or just don't use async and just initialize your component properties with a default value, until the first value comes in from the store.

Upvotes: 0

Related Questions