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.
1
import promiseMiddleware from 'redux-promise-middleware'
2
​
3
applyMiddleware(
4
  promiseMiddleware({
5
    // Optional configuration
6
  }),
7
)(createStore)
Copied!
This implementation enabled custom configuration, but, for most implementations, it is uncessary overhead.
After
Now, the default export is preconfigured and ready to go.
1
import promise from 'redux-promise-middleware'
2
​
3
applyMiddleware(
4
  promise,
5
)(createStore)
Copied!
The middleware still supports custom configuration: import createPromise and pass in the configuration object.
1
import { createPromise } from 'redux-promise-middleware'
2
​
3
applyMiddleware(
4
  createPromise({
5
    // Custom configuration
6
    typeDelimiter: '/',
7
  }),
8
)(createStore)
Copied!
New: ActionType Export
Before
1
import { PENDING, FULFILLED, REJECTED } from 'redux-promise-middleware'
Copied!
Previously, the middleware exported three string constants. One each for the pending, fulfilled and rejected action types. This is useful for reducers, for example:
1
const reducer = (state = {}, action) => {
2
  switch(action.type) {
3
    case `FOO_${PENDING}`:
4
      // ..
5
​
6
    case `FOO_${FULFILLED}`:
7
      // ...
8
​
9
    default: return state;
10
  }
11
}
Copied!
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
1
import { ActionType } from 'redux-promise-middleware'
Copied!
Now, the action types are exported as one enum.
1
const reducer = (state = {}, action) => {
2
  switch(action.type) {
3
    case `FOO_${ActionType.Pending}`:
4
      // ..
5
​
6
    case `FOO_${ActionType.Fulfilled}`:
7
      // ...
8
​
9
    case `FOO_${ActionType.Rejected}`:
10
      // ...
11
​
12
    default: return state;
13
  }
14
}
Copied!
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.
1
const reducer = (state = {}, action) => {
2
  switch(action.type) {
3
    case `FOO_PENDING`:
4
      // ..
5
​
6
    case `FOO_FULFILLED`:
7
      // ...
8
​
9
    case `FOO_REJECTED`:
10
      // ...
11
​
12
    default: return state;
13
  }
14
}
Copied!

Guides - Previous

Use with Promises Resolved with Null Values

Next - Upgrade Guides

Upgrade from 4.x to 5.0.0

Last modified 2yr ago

Copy link

Contents

New: Preconfigured by Default

Before

After

New: ActionType Export

Before

After