v6.md

Upgrade from 5.x to 6.0.0

This version includes changes to the public API, making it easier to import and use the middleware.

New: Preconfigured by Default

Before

Previously, the middleware need to be instantiated with an optional configuration.

import promiseMiddleware from 'redux-promise-middleware'

applyMiddleware(
  promiseMiddleware({
    // Optional configuration
  }),
)(createStore)

This implementation enabled custom configuration, but, for most implementations, it is uncessary overhead.

After

Now, the default export is preconfigured and ready to go.

import promise from 'redux-promise-middleware'

applyMiddleware(
  promise,
)(createStore)

The middleware still supports custom configuration: import createPromise and pass in the configuration object.

import { createPromise } from 'redux-promise-middleware'

applyMiddleware(
  createPromise({
    // Custom configuration
    typeDelimiter: '/',
  }),
)(createStore)

New: ActionType Export

Before

import { PENDING, FULFILLED, REJECTED } from 'redux-promise-middleware'

Previously, the middleware exported three string constants. One each for the pending, fulfilled and rejected action types. This is useful for reducers, for example:

const reducer = (state = {}, action) => {
  switch(action.type) {
    case `FOO_${PENDING}`:
      // ..

    case `FOO_${FULFILLED}`:
      // ...

    default: return state;
  }
}

This is a nice affordance, it could be better design if the action types were exported as an enum (E.g., an object, since this is just JavaScript), as opposed three individual strings.

After

import { ActionType } from 'redux-promise-middleware'

Now, the action types are exported as one enum.

const reducer = (state = {}, action) => {
  switch(action.type) {
    case `FOO_${ActionType.Pending}`:
      // ..

    case `FOO_${ActionType.Fulfilled}`:
      // ...

    case `FOO_${ActionType.Rejected}`:
      // ...

    default: return state;
  }
}

Using action types is entirely optional. One one hand, code benefits from more robust types and is less prone to static errors, but, on another hand, you and your team spends more time and effort writing the code.

At the end of the day, you can also just use regular strings like any other action.

const reducer = (state = {}, action) => {
  switch(action.type) {
    case `FOO_PENDING`:
      // ..

    case `FOO_FULFILLED`:
      // ...

    case `FOO_REJECTED`:
      // ...

    default: return state;
  }
}