router-store - GitLite

KO | EN

gitlite — search

#python #ai #typescript #go #android #rust #deep-learning #docker #java #windows #pytorch #security #mcp #open-source

router-store

(★ 182)

Bindings to connect the Angular Router to @ngrx/store

File Explorer

Download Latest Version (.zip)

- actions.spec.ts
- connect.spec.ts
- index.spec.ts
- reducer.spec.ts
- actions.ts
- connect.ts
- reducer.ts
- router-store-module.ts
.gitignore
CHANGELOG.md
circle.yml
index.ts
karma.conf.js
LICENSE
package.json
README.md
rollup.config.js
tests.bundle.ts
tsconfig.dist.json
tsconfig.json
tslint.json
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/ngrx/router-store

Downloads the entire project code from GitHub to your computer.

cd router-store

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install @ngrx/router-store@1.2.6 --save

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

---
# This repository is for version 1.x of of @ngrx/router-store.
# [Click here for the latest version (4.x)](https://github.com/ngrx/platform)
---

# @ngrx/router-store
Bindings to connect angular/router to ngrx/store

[![Join the chat at https://gitter.im/ngrx/store](https://badges.gitter.im/ngrx/store.svg)](https://gitter.im/ngrx/store?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

### Installation

```
  npm install @ngrx/router-store@1.2.6 --save
  ```

### Setup

1. Use the `routerReducer` when providing the `StoreModule.provideStore` and add the `RouterStoreModule.connectRouter` to the `@NgModule.imports`:

```ts
  import { StoreModule } from '@ngrx/store';
  import { routerReducer, RouterStoreModule } from '@ngrx/router-store';

@NgModule({
    imports: [
      BrowserModule,
      StoreModule.provideStore({ router: routerReducer }),
      RouterStoreModule.connectRouter()
    ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule {
  }
  ```

2. Add `RouterState` to main application state:

```ts
  import { RouterState } from '@ngrx/router-store';

export interface AppState {
    router: RouterState;
  };
  ```

3. (Optional) Set the initial value for the router state:

```ts
  StoreModule.provideStore({ router: routerReducer }, {
    router: {
      path: window.location.pathname + window.location.search
    }
  })
  ```

### Dispatching Actions

```ts
  import { go, replace, search, show, back, forward } from '@ngrx/router-store';
  ```

#### Navigation with a new state into history

```ts
  store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));
  ```

#### Navigation with replacing the current state in history

```ts
  store.dispatch(replace(['/path'], { query: 'string' }));
  ```
#### Navigation without pushing a new state into history

```ts
  store.dispatch(show(['/path'], { query: 'string' }));
  ```

#### Navigation with only changing query parameters

```ts
  store.dispatch(search({ query: 'string' }));
  ```

#### Navigating back

```ts
  store.dispatch(back());
  ```

#### Navigating forward

```ts
  store.dispatch(forward());
  ```

### Navigation Extras

The [Angular Router Navigation Extras](https://angular.io/docs/ts/latest/api/router/index/NavigationExtras-interface.html) are supported with each router action.

```ts
import { NavigationExtras } from '@angular/router';

let extras: NavigationExtras = {
  relativeTo: ActivatedRoute,
  fragment: string,
  preserveQueryParams: boolean,
  preserveFragment: boolean,
  skipLocationChange: boolean,
  replaceUrl: boolean
};

store.dispatch(go(['path', { routeParam: 1 }], { query: 'string' }, extras));
```