redux-fractal + redux-modules

fractal-modules.js

// Pagination/module.js
import { createModule } from 'redux-modules';

export default createModule({
  name: 'pagination',
  initialState: {
    currentPage: 0,
    perPage: 50,
  },
  transformations: [{
    type: 'SET_CURRENT_PAGE',
    reducer: (state, { payload }) => ({ ...state, currentPage: payload }),
  }, {
    type: 'SET_PER_PAGE',
    reducer: (state, { payload }) => ({ ...state, perPage: payload }),
  }],
});


// Pagination/Uncontrolled.jsx
import React from 'react';
import { createStore } from 'redux';
import { local } from 'redux-fractal';
import R from 'ramda';

import Pagination from './Pagination';
import { actions, reducer } from './module';

const Uncontrolled = (props) => {
  return (
    <Pagination {...{
      ...props,
      onChangePage: (page) => {
        props.setCurrentPage(page);
        props.onChangePage(page);
      },
      onChangePerPage: (perPage) => {
        props.setPerPage(perPage);
        props.onChangePerPage(perPage);
      },
    }} />
  );
};

Uncontrolled.propTypes = { ...Pagination.propTypes };

Uncontrolled.defaultProps = { ...Pagination.defaultProps };

export default local({
  key: (props) => props.localKey,
  createStore: () => createStore(reducer),
  mapDispatchToProps: (dispatch) => R.map(fn => payload => dispatch(fn(payload)), actions)
})(Uncontrolled);