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 | manifestNamecountNeededfilter | dispatched by the manifest when new data is required | | @@redux-manifest/REFRESH_COUNT | refreshCount | manifestNamefilter | dispatched by the manifest when the count needs to be updated | | @@redux-manifest/UPDATE_FILTER | updateFilter | manifestNamefilter | 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 | manifestNamedatacount | dispatched by the implementor in response to a REFRESH_DATA action with the requested data | | @@redux-manifest/SET_COUNT | setCount | manifestNamecount | dispatched by the implementor in response to a REFRESH_COUNT action with the requested count | | @@redux-manifest/SET_ERROR | setError | manifestNamemessage | dispatched by implementor to inform the manifest that processing a REFRESH_DATA or REFRESH_COUNT action failed | | @@redux-manifest/FOCUS_ROW | focusRow | manifestNameid | can be dispatched by the manifest or implementor to set the focused row | | @@redux-manifest/SET_IN_MEMORY_DATA | setInMemoryData | manifestNamedata | 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.