Skip to content

Commit

Permalink
docs(Entity): Fix examples for @ngrx/entity usage (ngrx#415)
Browse files Browse the repository at this point in the history
  • Loading branch information
brandonroberts authored and MikeRyanDev committed Sep 20, 2017
1 parent 2afb792 commit ddb2f97
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 50 deletions.
11 changes: 0 additions & 11 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,12 @@

### Setup

```
npm install
```

OR
```
yarn
```

### Testing

```
npm test
```

OR

```
yarn test
```
Expand Down
55 changes: 28 additions & 27 deletions docs/entity/adapter.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@ Usage:
import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';

export interface User {
id: number;
id: string;
name: string;
description: string;
}

export interface State extends EntityState<User> {
Expand All @@ -30,15 +29,14 @@ export function sortByName(a: User, b: User): number {
}

export const adapter: EntityAdapter<User> = createEntityAdapter<User>({
selectId: (user: User) => user.id,
sortComparer: sortByName,
});
```

## Adapter Methods

These methods are provided by the adapter object returned
when using [createEntityAdapter](#createEntityAdapter). The methods are used inside your reducer function to manage
when using [createEntityAdapter](#createentityadapter). The methods are used inside your reducer function to manage
the entity collection based on your provided actions.

### getInitialState
Expand All @@ -51,9 +49,8 @@ Usage:
import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';

export interface User {
id: number;
id: string;
name: string;
description: string;
}

export interface State extends EntityState<User> {
Expand Down Expand Up @@ -96,9 +93,8 @@ Usage:

```ts
export interface User {
id: number;
id: string;
name: string;
description: string;
}
```

Expand Down Expand Up @@ -138,25 +134,25 @@ export class AddUsers implements Action {
export class UpdateUser implements Action {
readonly type = UPDATE_USER;

constructor(public payload: { user: User }) {}
constructor(public payload: { user: { id: string, changes: User } }) {}
}

export class UpdateUsers implements Action {
readonly type = UPDATE_USERS;

constructor(public payload: { users: User[] }) {}
constructor(public payload: { users: { id: string, changes: User }[] }) {}
}

export class DeleteUser implements Action {
readonly type = DELETE_USER;

constructor(public payload: { user: User }) {}
constructor(public payload: { id: string }) {}
}

export class DeleteUsers implements Action {
readonly type = DELETE_USERS;

constructor(public payload: { users: User[] }) {}
constructor(public payload: { ids: string[] }) {}
}

export class ClearUsers implements Action {
Expand Down Expand Up @@ -185,9 +181,7 @@ export interface State extends EntityState<User> {
selectedUserId: number | null;
}

export const adapter: EntityAdapter<User> = createEntityAdapter<User>({
selectId: (user: User) => user.id
});
export const adapter: EntityAdapter<User> = createEntityAdapter<User>();

export const initialState: State = adapter.getInitialState({
// additional entity state properties
Expand Down Expand Up @@ -215,6 +209,14 @@ export function reducer(
return adapter.updateMany(action.payload.users, state);
}

case UserActions.DELETE_USER: {
return adapter.removeOne(action.payload.id, state);
}

case UserActions.DELETE_USERS: {
return adapter.removeMany(action.payload.ids, state);
}

case UserActions.LOAD_USERS: {
return adapter.addAll(action.payload.users, state);
}
Expand All @@ -236,41 +238,40 @@ export const getSelectedUserId = (state: State) => state.selectedUserId;

The `getSelectors` method returned by the created entity adapter provides functions for selecting information from the entity.

The `getSelectors` method takes a selector function
as its only argument to select the piece of state for a defined entity.
The `getSelectors` method takes a selector function as its only argument to select the piece of state for a defined entity.

Usage:

`reducers/index.ts`

```ts
import { createSelector, createFeatureSelector } from '@ngrx/store';
import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store';
import * as fromUser from './user.reducer';

export interface State {
users: fromUser.State;
}

export const selectUserState = createFeatureSelector<fromUser.State>('users');
export const reducers: ActionReducerMap<State> = {
users: fromUser.reducer
};

export const selectUserState = createFeatureSelector<fromUser.State>('users');

export const {
// select the array of user ids
selectIds: getUserIds,
selectIds: selectUserIds,

// select the dictionary of user entities
selectEntities: getUserEntities,
selectEntities: selectUserEntities,

// select the array of users
selectAll: getAllUsers,
selectAll: selectAllUsers,

// select the total user count
selectTotal: getUserTotal
selectTotal: selectUserTotal
} = fromUser.adapter.getSelectors(selectUserState);

export const selectUserIds = createSelector(selectUserState, getUserIds);
export const selectUserEntities = createSelector(selectUserState, getUserEntities);
export const selectAllUsers = createSelector(selectUserState, getAllUsers);
export const selectUserCount = createSelector(selectUserState, getUserTotal);
export const selectCurrentUserId = createSelector(selectUserState, fromUser.getSelectedUserId);
export const selectCurrentUser = createSelector(
selectUserEntities,
Expand Down
26 changes: 15 additions & 11 deletions docs/entity/interfaces.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,26 @@

## EntityState<T>

The Entity State is a predefined generic interface for a given entity collection with the following properties:
The Entity State is a predefined generic interface for a given entity collection with the following interface:

* `ids`: An array of all the primary ids in the collection
* `entities`: A dictionary of entities in the collection indexed by the primary id
```ts
interface EntityState<V> {
ids: string[];
entities: { [id: string]: V };
}
```

Extend this interface to provided any additional properties for the entity state.
* `ids`: An array of all the primary ids in the collection
* `entities`: A dictionary of entities in the collection indexed by the primary id

Usage:
Extend this interface to provided any additional properties for the entity state.

```ts
Usage:

```ts
export interface User {
id: number;
id: string;
name: string;
description: string;
}

export interface State extends EntityState<User> {
Expand All @@ -31,7 +37,5 @@ Provides a generic type interface for the provided [entity adapter](./adapter.md
Usage:

```ts
export const adapter: EntityAdapter<User> = createEntityAdapter<User>({
selectId: (user: User) => user.id
});
export const adapter: EntityAdapter<User> = createEntityAdapter<User>();
```
2 changes: 1 addition & 1 deletion docs/store/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ To inject meta reducers, use the `META_REDUCERS` injection token exported in
the Store API and a `Provider` to register the meta reducers through dependency
injection.

```
```ts
import { MetaReducer, META_REDUCERS } '@ngrx/store';
import { SomeService } from './some.service';

Expand Down

0 comments on commit ddb2f97

Please sign in to comment.