Step #3: TodosStore

Now we could use a ‘home-grown’ approach and write [in our Facade] a significant amount of CRUD code for our Todo collection, reducer, and performant RxJS stream emissions.

Instead let’s use Akita to manage our state ( todos + filter )… it is so easy!

If we use TodosStore extends EntityStore then our TodosStore will have built-in functionality for CRUD operations on the todo collection. Then we just add a filter property to our TodosState state.

The Akita store has functionality to update and cache our state (aka data). But it should not be used to read or access that data!

The Akita store is used only for incoming data. For outgoing data (eg to read/access the state), we use a TodosQuery : with two (2) public property streams: filter$ and todos$ .

The filter$ is a stream constructed from this.select(...) which uses the predicate function state => state.filter to extract the filter value from our cached state. This stream is special:

Whenever the filter state data changes, filter$ will re-emit the value from the stream.

state data changes, will re-emit the value from the stream. If any other state data changes — but NOT the filter value - the filter$ stream will not re-emit. The value is memoized!

To publish a filtered list of Todo(s), combine the output of the two (2) streams. We use this.selectAll() to get a stream for the entire todo list (regardless of completed status) and combine that stream that with the filter$ stream.

The values from BOTH streams are used to return a final list of only the desired todo items.