> For the complete documentation index, see [llms.txt](https://nggirls-australia.gitbook.io/tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nggirls-australia.gitbook.io/tutorial/more-workshops/ngrx_intro/selectors.md).

# #4: Selectors

Now we'll add a **selector** that allows us to display data from the store instead of the database. This allows the store to become the single source of truth for data in our application.

Take a look at the documentation and try to create selector based on information provided on [NgRx Docs](https://ngrx.io/guide/store/selectors).

⏳⏳⏳⏳⏳⏳

Does your code look something similar to this?

```typescript
export const getRootState = (state: State) => state.todoList;

export const getTodoItems = createSelector(
  getRootState,
  (state: TodoListState) => state.items
);
```

## Displaying data from store

Now that our selector is ready, let's retrieve items from the store.

One question we might ask ourselves is where to implement the code?

The `todo-list-service.ts` is a good candidate, so we'll show examples using this file 😊

To access the selector, you need to first initialize the store in constructor. Then you may use your selector by calling `select` method on store.

The recommended way to import selectors looks like this:

```typescript
import * as fromTodoListSelectors from '../store/todo-list/selectors';
```

Now add the `select` method:

```typescript
this.store.select(fromTodoListSelectors.getTodoItems)
```

It's returning an Observable with todo list items from store, so you can subscribe to it. Since it's an Observable, we'll automatically get the latest data without having to manually call it again. 😊

Now we can make the change to retrieve data from the store instead of the database:

```typescript
  retrieveListFromStore() {
    this.store.select(fromTodoListSelectors.getTodoItems).subscribe(value => this.todoListSubject.next(value));
  }
```

You may now remove the code calling MongoDB and take a moment to double check your work by verifying your app accesses the todo list inside the store. 😊

> For your next step or your homework, try adding user information related store. Good luck; you got this! 💪


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nggirls-australia.gitbook.io/tutorial/more-workshops/ngrx_intro/selectors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.