Skip to content

Commit

Permalink
feat: finished with the exercise about installing ngrx and ngrx devtools
Browse files Browse the repository at this point in the history
  • Loading branch information
ywarezk committed Oct 28, 2023
1 parent aacc925 commit 5636352
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions content/en/course/angular/ngrx/installing-ngrx-store/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -90,4 +90,50 @@ Click [this link](https://chrome.google.com/webstore/detail/redux-devtools/lmhkp

![Redux dev tools](https://github.com/ywarezk/academeez/blob/main/content/en/course/angular/ngrx/installing-ngrx-store/redux-devtools.gif?raw=true)

### Inspect your state with Redux dev tools

Let's populate our state with some initial data, and make sure we can examine that data with Redux dev tools.

```typescript title="src/app/app.module.ts"
import {NgModule, isDevMode} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';
import {StoreModule} from '@ngrx/store';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
StoreModule.forRoot(
{
counter: () => 0,
},
{}
),
StoreDevtoolsModule.instrument({maxAge: 25, logOnly: !isDevMode()}),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```

We populated the state with `counter: 0` (it's not important the exact syntax, we will learn about reducers later on).

### Examine the state

Run our app:

```bash
npx ng serve
```

open the developer tools, you should see a new tab in the developer tools called `Redux`, this tab was added after installing the extension of `Redux Dev Tools` and you can use it to inspect the state.

![Inspect State](https://github.com/ywarezk/academeez/blob/main/content/en/course/angular/ngrx/installing-ngrx-store/examine-state.gif?raw=true)

</Steps>

This basic app will be the baseline of all the exercises you will do in the `NGRX` chapter.

0 comments on commit 5636352

Please sign in to comment.