Search code examples
angularngrxngrx-store

Removing item from store is not working in NgRx

I am learning NgRx. So I have created a small app. There is two text fields to add items and show items as a list. I can add item to the list. But I can't delete the item from the list. Here is the code:

Actions:

import { Action } from '@ngrx/store'
import { Tutorial } from '../_models/tutorial.model'

export const ADD_TUTORIAL       = '[TUTORIAL] Add'
export const REMOVE_TUTORIAL    = '[TUTORIAL] Remove'

export class AddTutorial implements Action {
    readonly type = ADD_TUTORIAL

    constructor(public payload: Tutorial) {}
}

export class RemoveTutorial implements Action {
    readonly type = REMOVE_TUTORIAL

    constructor(public payload: number) {}
}

export type TutorialActions = AddTutorial | RemoveTutorial

Reducer:

import { Tutorial } from "../_models/tutorial.model";
import * as TutorialActions from './../_actions/tutorial.actions'

const initialState: Tutorial = {
    name: 'Initial Tutorial',
    url: 'http://google.com'
}

export function tutorialReducer(state: Tutorial[] = [initialState], action: TutorialActions.TutorialActions) {
    switch(action.type) {
        case TutorialActions.ADD_TUTORIAL:
            return [...state, action.payload];
        
        case TutorialActions.REMOVE_TUTORIAL:
            state.splice(action.payload, 1)
            return state;
            
        default:
            return state;
    }
}

List Component:

<div class="right" *ngIf="tutorials">

  <h3>Tutorials</h3>
  <ul>
    <li (click)="delTutorial(i)" *ngFor="let tutorial of tutorials | async; let i = index">
      <!-- <a [href]="tutorial.url" target="_blank">{{ tutorial.name }}</a> -->
      {{ tutorial.name }}
    </li>
  </ul>
</div>

Ts File:

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { AppState } from '../app.state';
import { Tutorial } from '../_models/tutorial.model';
import * as TutorialActions from './../_actions/tutorial.actions';

@Component({
  selector: 'app-read',
  templateUrl: './read.component.html',
  styleUrls: ['./read.component.css']
})
export class ReadComponent implements OnInit {

  tutorials!: Observable<Tutorial[]>;

  constructor(private store: Store<AppState>) {
    this.tutorials = store.select('tutorial');
  }

  delTutorial(index: number) {
    this.store.dispatch(new TutorialActions.RemoveTutorial(index) )
  }

  ngOnInit(): void {
  }

}

Whenever I click the list to delete item, I get the below error: enter image description here

Solution

  • At last, I found the solution. Here is the code for reducer function:

    export function tutorialReducer(state: Tutorial[] = [initialState], action: TutorialActions.TutorialActions) {
    switch(action.type) {
        case TutorialActions.ADD_TUTORIAL:
            return [...state, action.payload];
        
        case TutorialActions.REMOVE_TUTORIAL:
            const index = action.payload;
            return [...state.slice(0, index), ...state.slice(index + 1)];    
                                    
        default:
            return state;
    }
}