BEFORE-Ember-Redux

actions.index.js

import * as ACTION_TYPES from 'twiddle/actions/types';

const goToPage = (pageNumber) => ({
	type: ACTION_TYPES.SET_PAGE,
  payload: pageNumber
});

const updatePageSize = (newPageSize) => ({
  type: ACTION_TYPES.SET_PAGE_SIZE,
  payload: newPageSize
});

export {
  goToPage,
  updatePageSize
}

actions.types.js

export const SET_PAGE = 'TWIDDLE::SET_PAGE';
export const SET_PAGE_SIZE = 'TWIDDLE::SET_PAGE_SIZE';

components.items-display.js

import Ember from 'ember';
import { connect } from 'ember-redux';

const stateToComputed = ({ page: { pageNumber, pageSize, items } }) => ({
  pageNumber,
  pageSize,
  items
});

const ItemsComponent = Ember.Component.extend({  
  itemsToRender: Ember.computed('pageSize', 'pageNumber', 'items', function() {
    const pageSize = this.get('pageSize');
  	const beginIndex = (this.get('pageNumber') - 1) * pageSize + 1;
  	return this.get('items').slice(beginIndex - 1, beginIndex + pageSize);
  })
});

export default connect(stateToComputed)(ItemsComponent);

components.page-changer.js

import Ember from 'ember';
import { connect } from 'ember-redux';
import { goToPage } from 'twiddle/actions';

const stateToComputed = ({ page: { pageNumber, pageSize, items } }) => ({
  pageNumber,
  pageSize,
  items
});

const dispatchToActions = {
  goToPage
};

const PagerComponent = Ember.Component.extend({
  numberItems: Ember.computed('items', function() {
    return this.get('items').length;
  }),
  lastPageNumber: Ember.computed('pageSize', 'numberItems', function() {
    return Math.ceil(this.get('numberItems') / this.get('pageSize'));      
  }),
  isFirstPage: Ember.computed('pageNumber', function() {
    return this.get('pageNumber') === 1;
  }),
  isLastPage: Ember.computed('pageNumber', 'lastPageNumber', function() {
    return this.get('pageNumber') === this.get('lastPageNumber');
  }),
  
  actions: {  
    firstPage() {
      this.send('goToPage', 1);
    },
    nextPage() {
      this.send('goToPage', this.get('pageNumber') + 1);
    },
    previousPage() {
      this.send('goToPage', this.get('pageNumber') - 1);
    },
    lastPage() {
      this.send('goToPage', this.get('lastPageNumber'));
    }
  }
});

export default connect(stateToComputed, dispatchToActions)(PagerComponent);

components.page-sizer.js

import Ember from 'ember';
import { connect } from 'ember-redux';
import { updatePageSize } from 'twiddle/actions';

const PAGE_SIZES = [10, 25, 50, 100];

const stateToComputed = ({ page: { pageSize } }) => ({
  pageSize
});

const dispatchToActions = {
  updatePageSize
};

const PageSizer = Ember.Component.extend({
  pageSizes: Ember.computed('pageSize', function() {
    const pageSize = this.get('pageSize');
    return PAGE_SIZES.map((size) => {
      return {
        size,
        selected: size === pageSize
      }
    });
  }),
  
  actions: {
  	pageSizeSelected(pageSize) {
      // proxy action to convert to int
      this.send('updatePageSize', parseInt(pageSize, 10));
    }
  }
});

export default connect(stateToComputed, dispatchToActions)(PageSizer);

components.pager-status.js

import Ember from 'ember';
import { connect } from 'ember-redux';

const stateToComputed = ({ page: { pageNumber, pageSize, items } }) => ({
  pageNumber,
  pageSize,
  items
});

const PagerStatusComponent = Ember.Component.extend({
  numberItems: Ember.computed('items', function() {
    return this.get('items').length;
  }),
  
  beginPageIndex: Ember.computed('pageSize', 'pageNumber', function() { 
    return this.get('pageSize') * (this.get('pageNumber') - 1) + 1;
  }),
  
  endPageIndex: Ember.computed('beginPageIndex', 'pageSize', 'numberItems', function() { 
    const calculatedPageEnd = this.get('beginPageIndex') + this.get('pageSize') - 1;
    const numberItems = this.get('numberItems');
    return Math.min(calculatedPageEnd, numberItems);
  })
});

export default connect(stateToComputed)(PagerStatusComponent);

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

reducers.index.js

import { combineReducers } from 'redux';
import { handleActions } from 'redux-actions';

import * as ACTION_TYPES from 'twiddle/actions/types';

const initialState = {
  pageNumber: 1,
  pageSize: 10,
  items: Array.from({length: 127}, () => Math.floor(Math.random() * 1000))
};

const page = handleActions({
  [ACTION_TYPES.SET_PAGE]: (state, { payload }) => {
    return Object.assign({}, state, { pageNumber: payload});
  },
  [ACTION_TYPES.SET_PAGE_SIZE]: (state, { payload }) => {
    return Object.assign({}, state, { pageSize: payload});
  } 
}, initialState);

export default combineReducers({
  page
});

templates.application.hbs

{{pager-status}}

{{items-display}}

{{page-changer}}

{{page-sizer}}

templates.components.items-display.hbs

<ul>              
  {{#each itemsToRender as |item|}}
  	<li>{{item}}</li>
  {{/each}}
</ul>

templates.components.page-changer.hbs

{{#unless isFirstPage}}
	<a href='' {{action 'firstPage'}}>First</a>
  <a href='' {{action 'previousPage'}}>Prev</a>
{{/unless}}

{{#unless isLastPage}}
	<a href='' {{action 'nextPage'}}>Next</a>
  <a href='' {{action 'lastPage'}}>Last</a>
{{/unless}}

templates.components.page-sizer.hbs

<select onchange={{action 'pageSizeSelected' value="target.value"}}>
  {{#each pageSizes as |pS|}}
    <option value={{pS.size}} selected={{pS.selected}}>{{pS.size}}</option>
  {{/each}}
</select>

templates.components.pager-status.hbs

Viewing {{beginPageIndex}} to {{endPageIndex}} of {{numberItems}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-redux": "3.0.0",
    "ember-redux-actions": "0.3.0"
  }
}