Last active
December 26, 2021 08:03
-
-
Save jhades/f2e97da5a4d977fabb0e7857b6420d10 to your computer and use it in GitHub Desktop.
How to build Angular 2 apps using Observable Data Services - Pitfalls to avoid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
addTodo(newTodo:Todo):Observable { | |
let obs = this.todoBackendService.saveTodo(newTodo); | |
obs.subscribe( | |
res => { | |
this._todos.next(this._todos.getValue().push(newTodo)); | |
}); | |
return obs; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let BehaviourSubject = new BehaviorSubject(initialState); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Injectable() | |
export class TodoStore { | |
private _todos: BehaviorSubject<List<Todo>> = new BehaviorSubject(List([])); | |
public readonly todos: Observable<List<Todo>> = this._todos.asObservable(); | |
constructor(private todoBackendService: TodoBackendService) { | |
this.loadInitialData(); | |
} | |
... | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let currentValue = behaviorSubject.getValue(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
saveTodo(newTodo: Todo) : Observable> { | |
var headers = new Headers(); | |
headers.append('Content-Type', 'application/json; charset=utf-8'); | |
return this.http.post('/todo', JSON.stringify(newTodo.toJS()),{headers}) | |
.pipe( | |
shareReplay() | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class App { | |
constructor(private todoStore: TodoStore, | |
private uiStateStore: UiStateStore) { | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
onAddTodo(description) { | |
this.todoStore.addTodo(newTodo) | |
.subscribe( | |
res => {}, | |
err => { | |
this.uiStateStore.endBackendAction(); | |
} | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
subject.next(newValue); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul id="todo-list"> | |
<li *ngFor="let todo of todoStore.todos | async" > | |
... | |
</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let subject = new Subject(); | |
subject.subscribe(value => console.log('Received new subject value: ')) |
@FacelessPanda. I am going through this and it could be List from the immutable library. Typescript does not mind so far.
import { List } from 'immutable';
An Angular 7 update would be appreciated...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What is this
List<>
type you use? It's not a typescript built-in type, and it's not in basarat/typescript-collections.I want to assume it's just an alias for an array, but I don't really like assuming things.