Instantly share code, notes, and snippets.

View ml-6.ts
ngOnDestroy() {
this.subscription.unsubscribe();
}
View ml-5.ts
ngOnInit() {
this.subscription = this.demoQuery.selectSomeProp$.subscribe(prop => {
this.someMethod();
this.cdr.detectChanges();
});
}
View ml-3.ts
export class PageOneComponent {
subscription: Subscription;
constructor(private demoQuery: DemoQuery) {}
ngOnInit() {
this.subscription = this.demoQuery.selectSomeProp$.subscribe(prop => {
this.someMethod();
});
}
View ml-1.ts
export interface DemoState {
someProp: number;
}
export function createInitialState(): DemoState {
return {
someProp: 0
};
}
View ra-service.ts
export class TodosService {
constructor(private todosStore: TodosStore) {}
updateFilter(filter: VISIBILITY_FILTER) {
this.todosStore.updateRoot({
ui: {
filter
}
});
}
View TodosPage.ts
export class TodosPageComponent extends React.PureComponent {
state: { todos: Todo[]; filter: string } = { todos: [], filter: '' };
constructor(props) {
super(props);
}
add = (text: string) => todosService.add(text);
toggleTodo = (id: ID) => todosService.complete(id);
View Filters.tsx
/** Use recompose or React PureComponent to prevent unnecessary re-rendering. */
export const Filters = pure(({ onChange, active }) => {
return (
<div>
<span>Show: </span>
<select onChange={onChange} value={active}>
<option value="SHOW_ALL">All</option>
<option value="SHOW_ACTIVE">Active</option>
<option value="SHOW_COMPLETED">Completed</option>
</select>
View ra-entity.ts
export interface EntityState<T> {
entities: HashMap<T>;
ids: ID[];
loading: boolean;
error: any;
}
View ra-model.ts
import { ID, guid } from '@datorama/akita';
export type Todo = {
id: ID;
text: string;
completed: boolean;
};
export function createTodo(text: string): Todo {
return {
View ra-query.ts
import { TodosState, todosStore, TodosStore } from './todos.store';
import { Todo, VISIBILITY_FILTER } from './todo.model';
import { QueryEntity } from '@datorama/akita';
import { combineLatest } from 'rxjs';
export class TodosQuery extends QueryEntity<TodosState, Todo> {
selectVisibilityFilter$ = this.select(state => state.ui.filter);
selectVisibleTodos$ = combineLatest(
this.selectVisibilityFilter$,