-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3bc29e0
commit 8eed99a
Showing
16 changed files
with
774 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)); | ||
} | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
# Architecture |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.