Search code examples
angularngrx

Cant get state in NGRX effect tuple error


I am trying to access the current store state in the effect so I can store my current cart locally. I followed the docs but I I keep getting a TS error. Below is my affect and the error its throwing. I am not sure what is causing the issue here as I am unfamiliar with the error.

ERROR in src/app/cart/store/cart.effects.ts(15,42): error TS2493: Tuple type '[never, ProductInterface[]]' of length '2' has no element at index '2'. [ng] src/app/cart/store/cart.effects.ts(15,54): error TS2493: Tuple type '[never, ProductInterface[]]' of length '2' has no element at index '3'.

import {Injectable} from '@angular/core';
import {Actions, createEffect, ofType} from '@ngrx/effects';
import {Store, select} from '@ngrx/store';
import {ProductInterface} from '../../interfaces/product.interface';
import {of} from 'rxjs'
import {CartActions, addToCart, clearCart, removeFromCart, updateCartQuantity, } from './cart.actions';
import {withLatestFrom, switchMap} from 'rxjs/operators';
import {Storage} from '@ionic/storage';
@Injectable()
export class CartEffects {

    storeCart$ = createEffect(() => this.actions$.pipe(
        ofType('[Cart Component] Add To Cart'),
        withLatestFrom(this.store.pipe(select('cart'))),
        switchMap(([action: CartActions, storeState: ProductInterface[]]) => {
            this.storage.set('cart', storeState);
            return of(action)
        })))

    constructor(
        private actions$: Actions,
        private storage: Storage,
        private store: Store<{cart: ProductInterface[]}>
    ) {}
}

Solution

  • The problem with your code is that you can not have the type inside the tuple (the function argument of the inner switchMap function). Try:

    switchMap(([action, storeState]: [CartActions, ProductInterface[]]) => {})