Delete todo

[Début de la branche step-3]

Même procédé que pour la création, sauf que l'on passera l'id de la todo à supprimer dans l'action.

store/actions/todo-list.action.ts

// ... autres
export namespace TodoListModule {

    export enum ActionTypes {
        // [...]
        DELETE_TODO = '[todoList] Delete Todo',
    }

    // [...]

    export class DeleteTodo {
        readonly type = ActionTypes.DELETE_TODO;
        constructor(public payload: number) {}
    }

    export type Actions = InitTodos
        | CreateTodo
        | DeleteTodo;
}

Se servir de filter pour renvoyer un nouveau tableau sans notre todo :

/store/reducers/todo-list.reducer.ts

    // [...]
    case TodoListModule.ActionTypes.DELETE_TODO:
        return {
            ...state,
            data : state.data.filter(todo => todo.id !== action.payload)
        };
    // [...]

Ajoutons la fonction de suppression :

/app.component.ts

// ...]
 template: `
    <!-- reste -->
    <li *ngFor="let todo of todos$ | async">
        <!-- reste -->
        <button (click)="deleteTodo(todo.id)">Supprimer</button>
    </li>
  `
    // ...]
  deleteTodo(id: number) {
    this.store.dispatch(new TodoListModule.DeleteTodo(id));
  }
}

Gérer les ids

Jusqu'à présent, à chaque fois que l'on ajoute une todo, on lui donnait un id "8" par défaut. Nous allons maintenant dynamiser l'attribution d'id.

Deux possibilités :

-1 Calculer la longueur du tableau de todo. -2 Utiliser des id uniques via un générateur comme uuid.

Première option :

/app.component.ts

//[...]
import { tap } from 'rxjs/operators';
//[...]
private todoslength : number;
//[...]
this.todos$ = store
    .pipe(
        select(selectTodos$),
        tap((todos) => {
            this.todoslength = todos.length;
        })
    );
//[...]
CreateTodo(todo: Todo){
    const payload = {
          ...todo,
          userId: 1,
          id: this.todoslength + 1
    };

tap : invoque une action pour chaque élément de la séquence observable.

Suppression terminée.

Suite >>