Task list is not (consistently) updated with new tasks

[cklanac]

The tasks list component is not update with the first task created, but subsequent tasks are added.

[cklanac]

The simplest fix seems to be replacing this.taskObserver.next(task) in favor of this.taskStore.push(task). And because this.tasks = this.taskService.taskStore; on line:32 in task.component.ts ties the taskStore to the tasks array, the display gets updated.

// In the task.service.ts file
  addTask(task: Task): void {
    // this.taskObserver.next(task);
    this.taskStore.push(task)
  }

Yeah, so that all seems to work for the tutorial, but I'm not sure how it will fair if the addTask() method actually posts to a service as described on page 178 in the book. Any thoughts to enlighten me?!

[deeleman]

I'd appreciate a plunkr with your code. I'd say there is something wrong with the observer implementation that prevents subscribers (such as the tasks list table) to auto update when new tasks are piped through the stream.

By pushing stuff straight to the tasks array store you will manage to update any component consuming that source of data but not the subscribers to the store observable stream, breaking state in the application. This issue will not be visible in the book example due to its simplicity, but will happen in larger applications containing lotsa components observing the application state.

Overviewing the basics of the Observable pattern and, to a lesser extent, the reactive paradigm are the ultimate goals of that chapter, so let's get to the bottom of this. Please share your code so we can review it, thanks! :)

[deeleman]

More specifically, the file I'm interested in is app/shared/services/task.service.ts. Also, please let us know where are you declaring the TaskService as a provider, thx.

[cklanac]

I'm running the code from Chapter 10 as-is, and my fork is up-to-date with your repo. The issue also happens in Chapter 9.

The issue might be more insidious than I thought... I just noticed, that it works fine initially when the user is forced to login before adding the task. But if you reload the browser and the token still exists hence skipping the login, it fails to load the first task. So it might be beyond the scope of the book, but it is certainly an use-case that would happen in the wild

Do you happen to have a Plunkr for Chapter 9 or 10? It would save me a ton of time copying or stripping down the code to exemplify the issue. In the meantime, here are the steps to reproduce it.

• Load the site: http://localhost/
• Navigate to Publish Task and get redirected to Login page
• Enter login info, click "Authenticate", get redirected to tasks page
• Navigate to Publish Task, enter task info, click "Save"
• You are redirected to the tasks page , and the new task is there (yay!).

=== here is where it get's wonky ===

• Now, load the browser: http://localhost/
• You'll have a fresh, clean tasks list as expected
• Navigate to Publish Task, (you won't need to login again)
• Enter task info, click "Save"
• You are redirected to the tasks page , but the new task is not there (boo!).

Again, this problem might be beyond the scope of the book, in which case you can close the issue. But it seems like a likely scenario in real life. Particularly, if the site allows the user to "remember me" or something similar so they don't need to login each time.

[deeleman]

All right, I see where the issue is now. it might required some refactoring and further explanation from my end, and unfortunately I'm a bit short of time now. Will try to allocate some time over the weekend and post a more detailed explanation. Basically it comes down to the way the observable data is setup in the example code. Stay in tune for a detailed post shortly.

[deeleman]

I'm currently working on an updated version of the codebase, fully compliant with Angular 2 Final. Will try to observe this specific case-scenario and come up wth some workarounds if possible.