redux-manifest v1.0.20

Redux Manifest

Redux Manifest is a paginated table built for react and redux designed to be backed by an asynchronous service. To make this work in a generic fashion, it dispatches two actions to obtain the data to display: @@redux-manifest/REFRESH_DATA and @@redux-manifest/REFRESH_COUNT. It is up to the system implementing the manifest to handle these actions, if they are left unhandled the manifest will not load.

The @@redux-manifest/REFRESH_DATA action is handled by dispatching a @@redux-manifest/SET_DATA action and the @@redux-manifest/REFRESH_COUNT action is handled by dispatching a @@redux-manifest/SET_COUNT. If there is an error retrieving the data for either of these actions a @@redux-manifest/SET_ERROR action should be dispatched.

The data is expected to be returned as an array of entry objects on the @@redux-manifest/SET_DATA action. The manifest uses a definition object, a required manifest prop, to transform the entry objects into the columns of a row in the manifest table.

Getting Started

Create the manifest definition.

const definition = [
  {
    id: 'customer-name',
    label: 'Name',
    sortable: true
  }. {
    id: 'start_date',
    label: 'Start Date',
    cellComponent: CellEpochDate
  }
]

Add the Manifest component and give it a name and the definition.

import { Manifest } from 'redux-manifest'

<Manifest name='testManifest' definition={definition} />

Add the Redux Manifest reducer to your application's reducer

import manifestReducer from 'redux-manifest/reducer'

const rootReducer = combineReducers({
  ...
  manifest: manifestReducer
})

Write the code to handle the actions, this example is using sagas. This code will look different in every system and is here as an example only.

import { setPage, setError, setCount, actionTypes as types } from 'redux-manifest'

function * sagaRefresh () {
  yield takeLatest(types.REFRESH_DATA, sagaDataService)
}

function * sagaRefreshCount (action) {
  yield takeEvery(types.REFRESH_COUNT, sagaCountService)
}

function * sagaDataService (action) {
  try {
    const data = yield service.getData(action.filter)
    yield put(setPage(action.manifestName, data.data))
  } catch (err) {
    yield put(setError(action.manifestName, err.message))
  }
}

function * sagaCountService (action) {
  try {
    const count = yield service.getCount(action.filter)
    yield put(setCount(action.manifestName, count))
  } catch (err) {
    yield put(setError(action.manifestName, err.message))
  }
}

API

Manifest Component

The Manifest component is the primary component for using

Manifest Definition

The manifest definition is an array of column definition objects which define the layout and appearance of the manifest. Each column definition object has at least two fields, id and label. The manifest definition is a required prop for the manifest component.

Example Manifest Definition

[{
  id: 'name',
  label: 'Customer Name'
}, {
  id: 'phone',
  label: 'Phone Number',
  sortable: true,
}, {
  id: 'date',
  label: 'Creation Date',
  sortable: true,
  cellComponent: CustomDateCellComponent,
  headerComponent: CustomDateHeaderComponent
}]

Manifest Definition Fields

Actions

Filter Object

filter: {
  page: 0,
  pageSize: 10,
  sorts: []
}

Example

To run the Basic Redux Manifest Example, run the following command in the terminal:

npm install
npm run example

This will serve the application on http://localhost:8081. Navigate to that page in your browser to see the Basic Redux Manifest Example.