Skip to content

Commit

Permalink
More content updates.
Browse files Browse the repository at this point in the history
  • Loading branch information
brandonroberts committed Sep 5, 2018
1 parent 3bc29e0 commit 8eed99a
Show file tree
Hide file tree
Showing 16 changed files with 774 additions and 115 deletions.
10 changes: 0 additions & 10 deletions projects/ngrx.io/content/guide/effects/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,6 @@ npm install @ngrx/effects --save
yarn add @ngrx/effects
```

### Nightly builds

```sh
npm install github:ngrx/effects-builds
```

```sh
yarn add github:ngrx/effects-builds
```

## APIs

Effects are injectable service classes that use two main APIs.
Expand Down
10 changes: 0 additions & 10 deletions projects/ngrx.io/content/guide/entity/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,3 @@ npm install @ngrx/entity --save
```sh
yarn add @ngrx/entity
```

### Nightly builds

```sh
npm install github:ngrx/entity-builds
```

```sh
yarn add github:ngrx/entity-builds
```
63 changes: 63 additions & 0 deletions projects/ngrx.io/content/guide/nightlies.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# Nightly builds

Nightly builds are provided to allow developers to use the latest features that haven't been released yet. The nightly builds of each package are published on each successful build of the master branch. Use the installation instructions below for each respective package.

### Store

```sh
npm install github:ngrx/store-builds
```

```sh
yarn add github:ngrx/store-builds
```

### Store Devtools

```sh
npm install github:ngrx/store-devtools-builds
```

```sh
yarn add github:ngrx/store-devtools-builds
```

### Effects

```sh
npm install github:ngrx/effects-builds
```

```sh
yarn add github:ngrx/effects-builds
```

### Router Store

```sh
npm install github:ngrx/router-store-builds
```

```sh
yarn add github:ngrx/router-store-builds
```

### Entity

```sh
npm install github:ngrx/entity-builds
```

```sh
yarn add github:ngrx/entity-builds
```

### Schematics

```sh
npm install github:ngrx/schematics-builds --save-dev
```

```sh
yarn add github:ngrx/schematics-builds --dev
```
50 changes: 50 additions & 0 deletions projects/ngrx.io/content/guide/router-store/actions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Router Actions

Router Store provides five navigation actions which are dispatched in a specific order. The `routerReducer` provided by Router Store updates its state with the latest router state given by the actions.

## Order of actions

Success case:

- `ROUTER_REQUEST`
- `ROUTER_NAVIGATION`
- `ROUTER_NAVIGATED`

Error / Cancel case (with early Navigation Action Timing:

- `ROUTER_REQUEST`
- `ROUTER_NAVIGATION`
- `ROUTER_CANCEL` / `ROUTER_ERROR`

Error / Cancel case (with late Navigation Action Timing:

- `ROUTER_REQUEST`
- `ROUTER_CANCEL` / `ROUTER_ERROR`

## Actions

### ROUTER_REQUEST

At the start of each navigation, the router will dispatch a `ROUTER_REQUEST` action.

### ROUTER_NAVIGATION

During navigation, before any guards or resolvers run, the router will dispatch a `ROUTER_NAVIGATION` action.

If you want the `ROUTER_NAVIGATION` to be dispatched after guards or resolvers run, change the Navigation Action Timing.

### ROUTER_NAVIGATED

After a successful navigation, the router will dispatch a `ROUTER_NAVIGATED` action.

### ROUTER_CANCEL

When the navigation is cancelled, for example due to a guard saying that the user cannot access the requested page, the router will dispatch a `ROUTER_CANCEL` action.

The action contains the store state before the navigation. You can use it to restore the consistency of the store.

### ROUTER_ERROR

When there is an error during navigation, the router will dispatch a `ROUTER_ERROR` action.

The action contains the store state before the navigation. You can use it to restore the consistency of the store.
61 changes: 1 addition & 60 deletions projects/ngrx.io/content/guide/router-store/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Router Store

Bindings to connect the Angular Router with [Store](guide/store)
Bindings to connect the Angular Router with [Store](guide/store). During each router navigation cycle, multiple [actions](guide/router/actions) are dispatched that allow you to listen for changes in the router's state. You can then select data from the state of the router to provide additional information to your application.

### Installation

Expand All @@ -12,16 +12,6 @@ npm install @ngrx/router-store --save
yarn add @ngrx/router-store
```

### Nightly builds

```sh
npm install github:ngrx/router-store-builds
```

```sh
yarn add github:ngrx/router-store-builds
```

## Setup

```ts
Expand All @@ -44,52 +34,3 @@ import { AppComponent } from './app.component';
})
export class AppModule {}
```

## Usage

Router Store provides five navigation actions which are dispatched in a specific order. The `routerReducer` provided by Router Store updates its state with the latest router state given by the actions.

#### Order of actions

Success case:

- `ROUTER_REQUEST`
- `ROUTER_NAVIGATION`
- `ROUTER_NAVIGATED`

Error / Cancel case (with early Navigation Action Timing:

- `ROUTER_REQUEST`
- `ROUTER_NAVIGATION`
- `ROUTER_CANCEL` / `ROUTER_ERROR`

Error / Cancel case (with late Navigation Action Timing:

- `ROUTER_REQUEST`
- `ROUTER_CANCEL` / `ROUTER_ERROR`

##### ROUTER_REQUEST

At the start of each navigation, the router will dispatch a `ROUTER_REQUEST` action.

##### ROUTER_NAVIGATION

During navigation, before any guards or resolvers run, the router will dispatch a `ROUTER_NAVIGATION` action.

If you want the `ROUTER_NAVIGATION` to be dispatched after guards or resolvers run, change the Navigation Action Timing.

##### ROUTER_NAVIGATED

After a successful navigation, the router will dispatch a `ROUTER_NAVIGATED` action.

##### ROUTER_CANCEL

When the navigation is cancelled, for example due to a guard saying that the user cannot access the requested page, the router will dispatch a `ROUTER_CANCEL` action.

The action contains the store state before the navigation. You can use it to restore the consistency of the store.

##### ROUTER_ERROR

When there is an error during navigation, the router will dispatch a `ROUTER_ERROR` action.

The action contains the store state before the navigation. You can use it to restore the consistency of the store.
10 changes: 0 additions & 10 deletions projects/ngrx.io/content/guide/schematics/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,6 @@ npm install @ngrx/schematics --save-dev
yarn add @ngrx/schematics --dev
```

## Nightly builds

```sh
npm install github:ngrx/schematics-builds --save-dev
```

```sh
yarn add github:ngrx/schematics-builds --dev
```

## Dependencies

After installing `@ngrx/schematics`, install the NgRx dependencies.
Expand Down
10 changes: 0 additions & 10 deletions projects/ngrx.io/content/guide/store-devtools/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,6 @@ npm install @ngrx/store-devtools --save
yarn add @ngrx/store-devtools
```

## Nightly builds

```sh
npm install github:ngrx/store-devtools-builds
```

```sh
yarn add github:ngrx/store-devtools-builds
```

## Setup

Instrumentation with the Chrome / Firefox Extension
Expand Down
117 changes: 117 additions & 0 deletions projects/ngrx.io/content/guide/store/actions.md
Original file line number Diff line number Diff line change
@@ -1 +1,118 @@
# Actions

## Action reducers

Provide the `ActionReducerMap<T>` with your reducer map for added type checking.

```ts
import { ActionReducerMap } from '@ngrx/store';
import * as fromAuth from './auth.actions';

export interface State {
auth: fromAuth.State;
}

export const reducers: ActionReducerMap<State> = {
auth: fromAuth.reducer,
};
```

## Typed Actions

Use strongly typed actions to take advantage of TypeScript's compile-time checking.

```ts
// counter.actions.ts
import { Action } from '@ngrx/store';

export enum CounterActionTypes {
INCREMENT = '[Counter] Increment',
DECREMENT = '[Counter] Decrement',
RESET = '[Counter] Reset',
}

export class Increment implements Action {
readonly type = CounterActionTypes.INCREMENT;
}

export class Decrement implements Action {
readonly type = CounterActionTypes.DECREMENT;
}

export class Reset implements Action {
readonly type = CounterActionTypes.RESET;

constructor(public payload: number) {}
}

export type CounterActionsUnion = Increment | Decrement | Reset;
```

This provides typed actions for your reducer functions.

```ts
// counter.reducer.ts
import { CounterActionTypes, CounterActionsUnion } from './counter.actions';

export function reducer(state: number = 0, action: CounterActionsUnion): State {
switch (action.type) {
case CounterActionTypes.INCREMENT: {
return state + 1;
}

case CounterActionTypes.DECREMENT: {
return state - 1;
}

case CounterActionTypes.RESET: {
return action.payload; // typed to number
}

default: {
return state;
}
}
}
```

Instantiate actions and use `store.dispatch()` to dispatch them:

```ts
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import * as CounterActions from './counter.actions';

interface AppState {
counter: number;
}

@Component({
selector: 'my-app',
template: `
<button (click)="increment()">Increment</button>
<button (click)="decrement()">Decrement</button>
<button (click)="reset()">Reset Counter</button>
<div>Current Count: {{ counter | async }}</div>
`,
})
export class MyAppComponent {
counter: Observable<number>;

constructor(private store: Store<AppState>) {
this.counter = store.pipe(select('counter'));
}

increment() {
this.store.dispatch(new CounterActions.Increment());
}

decrement() {
this.store.dispatch(new CounterActions.Decrement());
}

reset() {
this.store.dispatch(new CounterActions.Reset(3));
}
}
```
1 change: 1 addition & 0 deletions projects/ngrx.io/content/guide/store/architecture.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# Architecture
12 changes: 1 addition & 11 deletions projects/ngrx.io/content/guide/store/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,7 @@ npm install @ngrx/store
yarn add @ngrx/store
```

### Nightly builds

```sh
npm install github:ngrx/store-builds
```

```sh
yarn add github:ngrx/store-builds
```

## Setup
## Example

Create a reducer function for each data type you have in your application. The
combination of these reducers will make up your application state:
Expand Down
Loading

0 comments on commit 8eed99a

Please sign in to comment.