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));
}
}
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.