💫
Promise Middleware
  • Introduction
  • Getting Started
    • Introduction
    • Design Principles
  • Guides
    • Catching Errors Thrown by Rejected Promises
    • Chaining Actions
    • Comparison to other promise middleware
    • Custom Type Delimiters
    • Custom Types
    • Optimistic Updates
    • Use with Async/Await
    • Use with Reducers
    • Use with Redux Actions
    • Use with Redux Promise Actions
    • Use with Promises Resolved with Null Values
  • Upgrade Guides
    • Upgrade from 5.x to 6.0.0
    • Upgrade from 4.x to 5.0.0
    • Upgrade from 3.x to 4.0.0
    • Release History
Powered by GitBook
On this page
  • Installation
  • Setup
  • Use
  • Further Reading
  1. Getting Started

Introduction

Installation

First, install the middleware.

npm i redux-promise-middleware -s

Setup

Import the middleware and include it in applyMiddleware when creating the Redux store:

import promise from 'redux-promise-middleware'

composeStoreWithMiddleware = applyMiddleware(
  promise,
)(createStore)

Use

Dispatch a promise as the value of the payload property of the action.

const foo = () => ({
  type: 'FOO',
  payload: new Promise()
});

A pending action is immediately dispatched.

{
  type: 'FOO_PENDING'
}

Once the promise is settled, a second action will be dispatched. If the promise is resolved a fulfilled action is dispatched.

{
  type: 'FOO_FULFILLED'
  payload: {
    ...
  }
}

On the other hand, if the promise is rejected, a rejected action is dispatched.

{
  type: 'FOO_REJECTED'
  error: true,
  payload: {
    ...
  }
}

That's it!

Further Reading

PreviousIntroductionNextDesign Principles

Last updated 6 years ago

Copyright (c) 2017 Patrick Burtchaell. . .

Catching Errors Thrown by Rejected Promises
Use with Reducers
Optimistic Updates
Design Principles
Code licensed with the MIT License (MIT)
Documentation licensed with the CC BY-NC License