redux-modules-middleware

A collection of common redux-module action middleware.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
redux-modules-middleware
401.2.06 years ago7 years agoMinified + gzip package size for redux-modules-middleware in KB

Readme

redux-modules-middleware npm version
redux-modules-middleware is a library that contains commonly used action creator middleware intended for use with the redux-modules library.

Getting Started

Install

npm install redux-modules-middleware --save

Documentation

decorateMeta func -> action -> decoratedAction

Decorates the action's meta key with the provided function.
foo: {
  middleware: [
    decorateMeta(meta => 'meta is now a string!'),
  ],
  reducer: (state, { meta }) => {
    console.log(meta); // 'meta is now a string!'
    return state;
  }
},

decoratePayload func -> action -> decoratedAction

Decorates the action's payload key with the given function.
foo: {
  middleware: [
    decoratePayload(payload => 'payload is now a string!'),
  ],
  reducer: (state, { payload }) => {
    console.log(payload); // 'payload is now a string!'
    return state;
  }
},

log ({ formatter, logFunction }) -> action -> action

Runs action through formatter function, then calls the logFunction.
foo: {
  middleware: [
    log({
      formatter: action => [
      'thar be an action yonder',
      action
    ]}),
  ],
},
// logs `thar be an action yonder { type: foo }`
formatter should return an array of arguments to be applied to the logFunction.

swapTypes object -> action -> decoratedAction

Takes an object where keys are the types to swap, and values are the types to swap them with.
foo: {
  middleware: [
    swapTypes({ foo: 'bar' }),
  ],
},
// action type becomes `bar`

propCheck (propFunction or object, { logFunction, formatter }) -> action -> action

Takes either a proptype function, or an object where keys are the payload keys, and values are the corresponding proptype functions.
create: {
  middleware: [
    propCheck({ name: PropTypes.string }),
  ],
},
deleteById: {
  middleware: [
    propCheck(PropTypes.number),
  ],
},

Usage Example

In this example propCheck and decoratePayload middleware are being used.

src/modules/todos.js

import { createModule } from 'redux-modules';
import { propCheck, decoratePayload } from 'redux-modules-middleware';
import { fromJS, List } from 'immutable';
import uuid from 'uuid';
import { PropTypes } from 'react';
const  { shape, string, number } = PropTypes;

export default createModule({
  name: 'todos',
  initialState: List(),
  selector: state => ({ todos: state.get('todos') }),
  transformations: {
    create: {
      middleware: [
        decoratePayload(payload => ({...payload, id: uuid.v4()})),
        propCheck(shape({ description: string.isRequired, id: string.isRequired })),
      ],
      reducer: (state, { payload }) =>
        state.update('collection', todos => todos.push(fromJS(payload))),
    },
    destroy: {
      middleware: [
        propCheck(number.isRequired),
      ],
      reducer: (state, { payload }) => {
        state.update('collection', todos => todos.delete(payload)),
    },
  },
});