@autoinvent/conveyor-redux NPM

conveyor-redux

A JavaScript Redux implementation of the state and actions needed by conveyor

Docs

Installation

With yarn:

yarn add @autoinvent/conveyor-redux

With npm:

npm install --save @autoinvent/conveyor-redux

Usage:

To generate the reducer to be used by conveyor:

Note: The key MUST be conveyor.

import { makeConveyorReducer } from 'conveyor-redux'

const rootReducer = combineReducers({
  conveyor: makeConveyorReducer(schema, config, overrides),
  ...otherReducers
})

Where schema is the same schema used for conveyor (a 'SchemaBuilder' type object created with conveyor-schema), config is a user-defined object for customization, and overrides is an map object which maps a reducer slice name (key) to a reducer (value).

To generate the epic to be used by conveyor:

import { makeConveyorEpic } from 'conveyor-redux'

const conveyorEpic = makeConveyorEpic(schema, queryTool, config, disabledEpics)

Where schema is the same schema used for conveyor (a 'SchemaBuilder' type object created with conveyor-schema), queryTool is a 'QueryTool' type object created with magql-query, config is a user-defined object for customization, and disabledEpics is an array of epic names (string) to not include

Note: Schema functions that normally receive customProps (getDisplayValue, etc.), which are used by the library, are NOT going to be received by the Reducers.

Reducer Overrides

The reducer overrides should be an map of conveyor reducer slice keys to reducer functions.

The list of slice reducers that can be overriden or disabled are: alerts, create, edit, index, modal, model, options, search, userPreferences, tableView, and tooltip. (REDUCER_KEY)

If it is a falsy value, the reducer will be disabled (not included).

Example:

const overrides = {
  alerts: false
  search: yourSearchReducer
}

const rootReducer = combineReducers({
  conveyor: makeConveyorReducer(schema, config, overrides),
  ...otherReducers
})

In this example, the alerts reducer slice is disabled while the search reducer is replaced with your own search reducer.

Disabling Epics

Individual epics can be disabled with the disabledEpics parameter passed to makeConveyorEpic.

The list of epics that can be disabled are:

addAlert, fetchModelDetail, fetchModelIndex, requestDeleteModel, requestDeleteModelFromDetailPage, requestDeleteRelTableModel, querySelectMenuOpen, relationshipSelectMenuOpenEpic, locationChange, fetchSearchEntries, triggerSearch, indexTableFilterSubmit, indexTableSortChange, fetchModelTooltip, detailAttributeEditSubmit, detailTableEditSubmit, detailTableRemoveSubmit, editSubmit, inlineFileDelete, inlineFileSubmit, detailAttributeEditSubmitCheck, detailTableEditSubmitCheck, editSubmitCheck, saveCreateCheck, saveCreate, fetchDeleteDetail

Example:

const disabledEpics = ['addAlert', 'saveCreateCheck']

const conveyorEpic = makeConveyorEpic(schema, queryTool, config, disabledEpics)

In this example, the addAlert and saveCreateCheck epics are disabled.

Special Features

Conveyor-Redux handles the special features below:

Pagination

The amount of table content that is displayed can be divided through pagination if paginate is set to true in Schema (paginate is true by default). The default amount of data displayed per a page is 20, but can be modified by passing in a config when instantiating the Conveyor Reducer and Epic.

Sorting

Table data can be sorted by a field's increasing or decreasing order if sortable is set to true in Schema (sortable is true by default). Sorting is toggleable by clicking the Table Header of a column Field. Sort order iterates over 'No Order ↕ -> Ascending Order ⬆ -> Descending Order ⬇'.

Filtering

Table data can be filtered by one or more filter rules set by the user if filterable is true in Schema (filterable is true by default). Number of filter options are available depending on the field type (string, integer, date, etc.)

Config

The config parameter is provided to makeConveyorReducer and makeConveyorEpic functions.

For example, the following config option changes the amount of data displayed per a page on a table.

const config = {
  tableView: {
    defaultPerPage: 10  // Displays only 10 rows on a table per page
  }
}
// Pass to makeConveyorReducer
makeConveyorReducer(schema, config, overrides)
// Pass to makeConveyorEpic
makeConveyorEpic(schema, queryTool, config, disabledEpics)

Redux structure

At the bottom is the default redux store structure (assuming no Reducers are overriden). router holds data for when handling actions from react-router while conveyor holds data for use with conveyor. Custom data can also be updated or added to the store through overrides. For example, the code below will add a new object called customQuery to the store and have a value of {someResult: "...Loading..."} in state:

export const customQuery = (state = initState, action) => {
  const payload = action.payload

  switch (action.type) {
    case (constants.CUSTOM_QUERY) : {
      return { "someResult": "...Loading" }
    }
    default:
      return state
  }
}

router
| action
| location
| | pathname
| | search
| | hash
| | key
| | query
conveyor
| alerts
| create
| | index
| | stack
| | originPath
| edit
| | modelName
| | | id
| | | | fieldName
| modal
| | modelName
| | | order
| | | values
| | Delete
| | | index
| model
| | modelName
| | | order
| | | values
| options
| | modelName
| | | fieldName
| | | | index
| tooltip
| | modelName
| | | id
| tableView
| | modelName
| | | page
| | | fields
| | | | fieldName
| | | | | page
| search
| | queryText
| | entries
| | dropdown
| userPreferences
| | darkMode
customQuery (If added)