ngrx-action-mapper
v1.0.0Ngrx Action Mapper
Simple utility for building Ngrx reducer with less boilerplate
Install
Install the npm package: ngrx-action-mapper
# with npm
npm install ngrx-action-mapper
# or with yarn
yarn add ngrx-action-mapper
Usage
// src/app/store/users.reducer.ts
import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
import { Action } from '@ngrx/store';
import { EntityActionMapper } from 'ngrx-action-mapper';
export interface User {
id: string;
name: string;
}
export abstract class BaseAction<Payload = never> {
public type: string = this.constructor.name;
constructor(public payload?: Payload) {}
}
export class AddOneUserAction extends BaseAction<User> {}
export class RemoveOneUserAction extends BaseAction<string> {}
export class SelectUserAction extends BaseAction<User> {}
export interface UsersState extends EntityState<User> {
// additional entity state properties
selectedUserId: string | null;
}
export interface UsersRootState extends EntityState<User> {
users: UsersState;
}
export const usersAdapter: EntityAdapter<User> = createEntityAdapter<User>();
export const initialUsersState: UsersState = usersAdapter.getInitialState({
selectedUserId: null,
});
export const actionReducer = new EntityActionMapper(initialUsersState, usersAdapter)
.mapEntityAction(AddOneUserAction, adapter => adapter.addOne)
.mapEntityAction(RemoveOneUserAction, adapter => adapter.removeOne)
.add(
SelectUserAction,
(state: UsersState, user: User): UsersState => {
return { ...state, selectedUserId: user.id };
},
)
.buildReducer();
export function usersReducer(state: UsersState, action: Action): UsersState {
return actionReducer(state, action);
}