Unsubscribed the form subscription

Author: mayuree99

src/app/form/form.component.ts

@@ -1,63 +1,72 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {Select, Store} from '@ngxs/store';
 import {ActivatedRoute, Router} from '@angular/router';
 import {TodoState} from '../states/todo.state';
 import {AddTodo, SetSelectedTodo, UpdateTodo} from '../actions/todo.action';
-import {Observable} from 'rxjs';
+import {Observable, Subscription} from 'rxjs';
 import {Todo} from '../models/Todo';
 
 @Component({
-    selector: 'app-form',
-    templateUrl: './form.component.html',
-    styleUrls: ['./form.component.scss']
+  selector: 'app-form',
+  templateUrl: './form.component.html',
+  styleUrls: ['./form.component.scss']
 })
-export class FormComponent implements OnInit {
-    @Select(TodoState.getSelectedTodo) selectedTodo: Observable<Todo>;
-    todoForm: FormGroup;
-    editTodo = false;
+export class FormComponent implements OnInit, OnDestroy {
+  @Select(TodoState.getSelectedTodo) selectedTodo: Observable<Todo>;
+  todoForm: FormGroup;
+  editTodo = false;
+  private formSubscription: Subscription = new Subscription();
 
-    constructor(private fb: FormBuilder, private store: Store, private route: ActivatedRoute, private router: Router) {
-        this.createForm();
-    }
+  constructor(private fb: FormBuilder, private store: Store, private route: ActivatedRoute, private router: Router) {
+    this.createForm();
+  }
 
-    ngOnInit() {
-        this.selectedTodo.subscribe(todo => {
-            if (todo) {
-                this.todoForm.patchValue({
-                    id: todo.id,
-                    userId: todo.userId,
-                    title: todo.title
-                });
-                this.editTodo = true;
-            } else {
-                this.editTodo = false;
-            }
+  ngOnInit() {
+    this.selectedTodo.subscribe(todo => {
+      if (todo) {
+        this.todoForm.patchValue({
+          id: todo.id,
+          userId: todo.userId,
+          title: todo.title
         });
-    }
+        this.editTodo = true;
+      } else {
+        this.editTodo = false;
+      }
+    });
+  }
 
-    createForm() {
-        this.todoForm = this.fb.group({
-            id: [''],
-            userId: ['', Validators.required],
-            title: ['', Validators.required]
-        });
-    }
+  ngOnDestroy(): void {
+    this.formSubscription.unsubscribe();
+  }
 
-    onSubmit() {
-        if (this.editTodo) {
-            this.store.dispatch(new UpdateTodo(this.todoForm.value, this.todoForm.value.id)).subscribe(() => {
-                this.clearForm();
-            });
-        } else {
-            this.store.dispatch(new AddTodo(this.todoForm.value)).subscribe(() => {
-                this.clearForm();
-            });
-        }
-    }
+  createForm() {
+    this.todoForm = this.fb.group({
+      id: [''],
+      userId: ['', Validators.required],
+      title: ['', Validators.required]
+    });
+  }
 
-    clearForm() {
-        this.todoForm.reset();
-        this.store.dispatch(new SetSelectedTodo(null));
+  onSubmit() {
+    if (this.editTodo) {
+      this.formSubscription.add(
+        this.store.dispatch(new UpdateTodo(this.todoForm.value, this.todoForm.value.id)).subscribe(() => {
+          this.clearForm();
+        })
+      );
+    } else {
+      this.formSubscription.add(
+        this.formSubscription = this.store.dispatch(new AddTodo(this.todoForm.value)).subscribe(() => {
+          this.clearForm();
+        })
+      );
     }
+  }
+
+  clearForm() {
+    this.todoForm.reset();
+    this.store.dispatch(new SetSelectedTodo(null));
+  }
 }

src/app/states/todo.state.ts

@@ -55,7 +55,6 @@ export class TodoState {
     @Action(UpdateTodo)
     updateTodo({getState, setState}: StateContext<TodoStateModel>, {payload, id}: UpdateTodo) {
         return this.todoService.updateTodo(payload, id).pipe(tap((result) => {
-            console.log(result);
             const state = getState();
             const todoList = [...state.todos];
             const todoIndex = todoList.findIndex(item => item.id === id);