README
🕹️ NgRx Handlers
NgRx Plugin for Generating Actions and Reducer Based on the Handler Map
☝️ Why to use NgRx Handlers?
- Because it's boring to write action types manually
- Because you don't need to write too much code for simple functionality
- Because barrels and
import * as Actions
are no longer needed - Because unlike other similar plugins, NgRx Handlers keep NgRx look and feel
🚀 Getting Started
🔧 Installation
NPM: npm install ngrx-handlers
Yarn: yarn add ngrx-handlers
⚡ Usage
NgRx Actions and Reducer
// books-page.actions.ts
export const enter = createAction('[Books Page] Enter');
export const updateSearchTerm = createAction(
'[Books Page] Update Search Term',
props<{ searchTerm: string }>(),
);
export const updateSelectedBookId = createAction(
'[Books Page] Update Selected Book Id',
props<{ selectedBookId: number }>(),
);
// books-effects.actions.ts
export const fetchBooks = createAction('[Books Effects] Fetch Books');
export const fetchBooksSuccess = createAction(
'[Books Effects] Fetch Books Success',
props<{ books: Book[] }>(),
);
export const fetchBooksError = createAction('[Books Effects] Fetch Books Error');
// books.reducer.ts
import * as BooksPageActions from './actions/books-page.actions';
import * as BooksEffectsActions from './actions/books-effects.actions';
export const reducer = createReducer(
initBooksState,
on(BooksPageActions.enter, state => ({ ...state, searchTerm: '' })),
on(BooksPageActions.updateSearchTerm, (state, { searchTerm }) => ({ ...state, searchTerm })),
on(BooksPageActions.updateSelectedBookId, (state, { selectedBookId }) => ({
...state,
selectedBookId,
})),
on(BooksEffectsActions.fetchBooks, state => ({ ...state, loading: true })),
on(BooksEffectsActions.fetchBooksSuccess, (state, { books }) => ({
...state,
books,
loading: false,
})),
on(BooksEffectsActions.fetchBooksError, state => ({ ...state, books: [], loading: false })),
);
NgRx Handlers
// books-page.handlers.ts
export const [BooksPageActions, booksPageReducer] = combineHandlers(initBooksState, 'booksPage', {
enter: state => ({ ...state, searchTerm: '' }),
updateSearchTerm: (state, { searchTerm }: { searchTerm: string }) => ({ ...state, searchTerm }),
updateSelectedBookId: (state, { selectedBookId }: { selectedBookId: number }) => ({
...state,
selectedBookId,
}),
});
// books-effects.handlers.ts
export const [BooksEffectsActions, booksEffectsReducer] = combineHandlers(
initBooksState,
'booksEffects',
{
fetchBooks: state => ({ ...state, loading: true }),
fetchBooksSuccess: (state, { books }: { books: Book[] }) => ({
...state,
books,
loading: false,
}),
fetchBooksError: state => ({ ...state, books: [], loading: false }),
},
);
// books.reducer.ts
export const booksReducer = mergeReducers(booksPageReducer, booksEffectsReducer);
combineHandlers
function returns strongly typed action creators and a reducer with O(1) efficiency.
Another great thing about combineHandlers
is that you don't have to manually write action types.
For example, when the source is booksPage
and the event is updateSearchTerm
, it will generate
the action creator with type [booksPage] updateSearchTerm
.
Every reducer generated by combineHandlers
function can be used independently via StoreModule
.
However, if you have multiple sources for a single state slice, there is mergeReducers
function that
will merge provided reducers into one.
In case you need to define actions without changing the state, this plugin provides plain
and
withPayload
functions.
export const [BooksPageActions, booksPageReducer] = combineHandlers(initBooksState, 'booksPage', {
showCreateBookDialog: plain(),
createBook: withPayload<{ book: Book }>(),
});
See the sample project here.
✊ Show Your Support
Give a ⭐ if you like NgRx Handlers 🙂
🤝 Contribute
Contributions are always welcome!
💡 Inspiration
This project is inspired by Juliette.
📝 License
This project is MIT licensed.
Copyright © 2020-2021 Marko Stanimirović