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

Prop	Required	Type	Description
name	*	string	used by Redux Manifest to refer to the specific manifest when dispatching actions and updating the state
definition	*	array	an array of objects which define the layout and appearance of the manifest
autoLoad		boolean	instructs the manifest to request data on mount, defaults to true
data		array	an array of entry objects that represent the complete dataset for this manifest, using this prop creates an in memory manifest so that responding to the REFRESH_DATA and REFRESH_COUNT actions is no longer required
filterFn		function	a function used by in-memory tables to filter the data, not including sorts

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

Column Field	Required	Type	Description
id	*	string	key used to pull data from the row's entry object
label	*	string	text to be shown in the column header
sortable		boolean	determines if the column can be sorted
cellComponent		Component	override the default cell component
headerComponent		Component	override the default header component

Actions

Action Type	Creator	Fields	Description
@@redux-manifest/REFRESH_DATA	refreshData	manifestName countNeeded filter	dispatched by the manifest when new data is required
@@redux-manifest/REFRESH_COUNT	refreshCount	manifestName filter	dispatched by the manifest when the count needs to be updated
@@redux-manifest/UPDATE_FILTER	updateFilter	manifestName filter	dispatched by implementor to change the filter the manifest is using, this will cause REFRESH_DATA and REFRESH_COUNT to be dispatched
@@redux-manifest/SET_DATA	setPage	manifestName data count	dispatched by the implementor in response to a REFRESH_DATA action with the requested data
@@redux-manifest/SET_COUNT	setCount	manifestName count	dispatched by the implementor in response to a REFRESH_COUNT action with the requested count
@@redux-manifest/SET_ERROR	setError	manifestName message	dispatched by implementor to inform the manifest that processing a REFRESH_DATA or REFRESH_COUNT action failed
@@redux-manifest/FOCUS_ROW	focusRow	manifestName id	can be dispatched by the manifest or implementor to set the focused row
@@redux-manifest/SET_IN_MEMORY_DATA	setInMemoryData	manifestName data	dispatched by the manifest when the data is set on the manifest component
@@redux-manifest/DESTROY	destroy	manifestName	dispatched by the manifest when the component is unmounted and is responsible for cleaning up the store when manifest information is no longer needed

Action Field	Type	Description
manifestName	string	unique name given to identify a manifest in the app
countNeeded	boolean	true when the count needs to be update, a REFRESH_COUNT action is also dispatched
filter	object	an object containing all the information needed to determine the rows on the current page and total count
data	array	an array of objects where every object is used to create a row in the current page of the table for the current filter
count	number	the total row count for the current filter
message	string	used on the SET_ERROR action to hold the error message
id	string	the row id

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.