Nonvoluntary Professional Mangling
    Have ideas to improve npm?Join in the discussion! »

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

    11.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

    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ć

    Install

    npm i ngrx-handlers

    DownloadsWeekly Downloads

    40

    Version

    11.0.1

    License

    MIT

    Unpacked Size

    113 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar