Now with Partition Management

    TypeScript icon, indicating that this package has built-in type declarations

    12.0.1 • Public • Published

    🕹️ NgRx Handlers

    MIT License NPM Build Status Coverage Status Downloads

    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


    NgRx Actions and Reducer

    // books-page.actions.ts
    export const enter = createAction('[Books Page] Enter');
    export const search = createAction('[Books Page] Search', props<{ searchTerm: string }>());
    export const selectBook = createAction(
      '[Books Page] Select Book',
      props<{ selectedBookId: number }>(),
    // books-api.actions.ts
    export const fetchBooksSuccess = createAction(
      '[Books API] Fetch Books Success',
      props<{ books: Book[] }>(),
    export const fetchBooksError = createAction('[Books API] Fetch Books Error');
    // books.reducer.ts
    import * as BooksPageActions from './actions/books-page.actions';
    import * as BooksApiActions from './actions/books-api.actions';
    export const reducer = createReducer(
      on(BooksPageActions.enter, state => ({ ...state, searchTerm: '', loading: true })),
      on(, (state, { searchTerm }) => ({ ...state, searchTerm, loading: true })),
      on(BooksPageActions.selectBook, (state, { selectedBookId }) => ({
      on(BooksApiActions.fetchBooksSuccess, (state, { books }) => ({
        loading: false,
      on(BooksApiActions.fetchBooksError, state => ({ ...state, books: [], loading: false })),

    NgRx Handlers

    // books-page.handlers.ts
    export const [BooksPageActions, booksPageReducer] = combineHandlers(initBooksState, 'booksPage', {
      enter: state => ({ ...state, searchTerm: '', loading: true }),
      search: (state, { searchTerm }: { searchTerm: string }) => ({
        loading: true,
      selectBook: (state, { selectedBookId }: { selectedBookId: number }) => ({
    // books-api.handlers.ts
    export const [BooksApiActions, booksApiReducer] = combineHandlers(initBooksState, 'booksApi', {
      fetchBooksSuccess: (state, { books }: { books: Book[] }) => ({
        loading: false,
      fetchBooksError: state => ({ ...state, books: [], loading: false }),
    // books.reducer.ts
    export const booksReducer = mergeReducers(booksPageReducer, booksApiReducer);

    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 search, it will generate the action creator with type [booksPage] search.

    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ć


    npm i ngrx-handlers

    DownloadsWeekly Downloads






    Unpacked Size

    93.8 kB

    Total Files


    Last publish


    • stanimirovic