0.0.5 • Published 5 years ago
ng-stator v0.0.5
NgStator
NgStator is a VERY OPINIATED ngrx toolbox to wrap most common behaviours used in an ngrx store.
what it does
It can create actions, initial state, selectors and reducers to manage the state of either a list, or an form
Its main goal is to provide a simple common ground for ngrx managed lists and forms in your app, without knowledge of your models
It is available as a library, but it can also easily be copied in your project, for a better customization
what it does not
It does not create any ngrx effects
It has a very minimal knowledge of your pagination and validation system
It certainly breaks multiple ngrx paradigms, in exchange for a simpler boilerplate
Install
npm install --save ng-stator
List slice
import { createListActions } from 'ng-stator';
// actions.ts
export const TodosListActions = createListActions('Todos');
export const {
LoadListRequest: LoadTodosListRequest,
LoadListSuccess: LoadTodosListSuccess,
LoadListFailure: LoadTodosListFailure,
} = TodosListActions;
// build actions creators
// [LoadListRequest] Todos
// [LoadListSuccess] Todos :: props<{ list: Todo[] }>
// [LoadListFailure] Todos :: props<{ error: Error }>
//
// pagination & filtering actions are also available
// reducer.ts
const initialState = {
todosList: createListSlice({ list: [] })
}
// handle each actions to alter the todosList slice
const reducer = withListReducer('todosList', TodosListActions)(
initialState,
// your custom reducers
);
// selectors.ts
export const visitTodos: MemoizedSelector<object, TodosListState> = createFeatureSelector<TodosListState>('todos');
export const {
selectList: selectTodosList,
selectError: selectTodosError,
selectIsLoading: selectTodosIsLoading,
} = createListSliceSelectors<List, Props, Filter>(createSelector(visitTodos, (state) => state.todosList));
Entity slice
import { createEntityActions } from 'ng-stator';
// actions.ts
export const TodoFormActions = createEntityActions('Todo Form');
export const {
LoadEntityRequest: LoadTodoFormRequest,
LoadEntitySuccess: LoadTodoFormSuccess,
LoadEntityFailure: LoadTodoFormFailure,
} = TodoFormActions;
// build actions creators
// [LoadEntityRequest] Todo Form
// [LoadEntitySuccess] Todo Form :: props<{ entity: Todo }>
// [LoadEntityFailure] Todo Form :: props<{ error: Error }>
//
// confirmation actions are also available