Select State

Reactive Select#

todo-feature-store.ts
import { Observable } from 'rxjs';
todos$: Observable<Todo[]> = this.select(state => state.todos);

select takes a callback function which gives you access to the current feature state (see the state parameter). Within that function you can pick a specific piece of state. select returns an Observable which will emit as soon as the selected state changes.

Memoized Selectors#

You can use memoized selectors also with the Feature Store... You only have to omit the feature key when using createFeatureSelector. This is because the Feature Store is operating on a specific feature state already (the corresponding feature key has been provided in the constructor).

todo-feature-store.ts
import { createFeatureSelector, createSelector } from 'mini-rx-store';
// Memoized Selectors
const getTodoFeatureState = createFeatureSelector<TodoState>(); // Omit the feature key!
const getTodos = createSelector(
getTodoFeatureState,
state => state.todos
);
const getSelectedTodoId = createSelector(
getTodoFeatureState,
state => state.selectedTodoId
)
const getSelectedTodo = createSelector(
getTodos,
getSelectedTodoId,
(todos, id) => todos.find(item => item.id === id)
)
class TodoFeatureStore extends FeatureStore<TodoState> {
// State Observables
todoState$: Observable<TodoState> = this.select(getTodoFeatureState);
todos$: Observable<Todo[]> = this.select(getTodos);
selectedTodo$: Observable<Todo> = this.select(getSelectedTodo);
constructor() {
super('todoFs', initialState) // Feature key 'todosFs' is provided here already...
}
addTodo(todo: Todo) {
this.setState(state => ({
todos: [...state.todos, todo]
}))
}
selectTodo(id: number) {
this.setState({selectedTodoId: id});
}
}