title: Angular 6 NGRX pagination, how define actions for advanced pagination
body: <p>I have an Angular 6 app with NgRx and I have problems with how to define actions and state properly.</p>
  <p>Actions:</p>
  <pre class="lang-ts prettyprint-override"><code>export class LoadUsers implements Action {
      readonly type = UserActionTypes.LoadUsers;
      constructor(public payload: { pagination: Pagination }) {
      }
  }
  export class LoadUsersSuccess implements Action {
      readonly type = UserActionTypes.LoadUsersSuccess;
      constructor(public payload: { users: User[], pagination: Pagination}) {
      }
  }
  </code></pre>
  <p>Pagination interface:</p>
  <pre class="lang-ts prettyprint-override"><code>export interface Pagination {
      pageSize?: number;
      pageIndex?: number;
      orderBy?: string;
      dir?: string;
      filter?: string;
  }
  </code></pre>
  <p>State:</p>
  <pre class="lang-ts prettyprint-override"><code>export interface State {
      pagination: Pagination;
      users: User;
  }
  </code></pre>
  <p>Reducer:</p>
  <pre class="lang-ts prettyprint-override"><code>export function reducer() {
  switch (action.type) {
          case UserActionTypes.LoadUsersSuccess: {
              return {
                  ...state,
                  pagination: action.payload.pagination,
                  users: action.payload.users
              };
          }
      }
  }
  </code></pre>
  <p>and effects:</p>
  <pre class="lang-ts prettyprint-override"><code>@Effect()
  loadUsers$ = this.actions$.pipe(
      ofType(UserActionTypes.LoadUsers),
      map((action: LoadUsers) =&gt; action.payload.pagination),
      switchMap((pagination: Pagination) =&gt; {
          return this.usersService.getUsers(pagination).pipe(
              map((response: any) =&gt; {
                  const payload = {
                      users: response.users,
                      pagination: pagination,
                  };
                  return new LoadUsersSuccess(payload);
              }),
              catchError((error) =&gt; of(new LoadUsersFail()))
          );
      })
  );
  </code></pre>
  <p>The problem is for example in the component where I want to display that users from the store.
  First of all should I dispatch action LoadUsers but for which params? For actual pagination params from the store? But when I subscribe to that, every time it would be modified, LoadUsers action would be dispatched again.
  Maybe for pagination params from initialState but is it a good approach?</p>
  <p>Is it the correct way to implement pagination or should I define actions like ChangePaginationParams() which in reducer assign new pagination params to store and effect of that is loading Users for that new params? But what to do in a situation when the effect will have an error, should it somehow reverse changes in store, because users wouldn't be proper for pagination params in store.</p>
  <p>Maybe you can provide me real-world solution, an example of the app where pagination is done using NgRx?</p>