Questions tagged [redux-promise-middleware]

This tag should be used to mark questions related to Redux Promise Middleware, a middleware for Redux that enables async action creators to return promises. The middleware also enables optimistic updates and dispatches pending and rejected/fulfilled actions that describe the promise state.

Redux promise middleware enables robust handling of async action creators in Redux.

Example:

const promiseAction = () => ({
  type: 'PROMISE',
  payload: Promise.resolve(),
})

The middleware can also be combined with Redux Thunk to chain action creators.

Example:

const secondAction = (data) => ({
  type: 'TWO',
  payload: data,
})

const first = () => {
  return (dispatch) => {
    const response = dispatch({
      type: 'ONE',
      payload: Promise.resolve(),
    })

    response.then((data) => {
      dispatch(secondAction(data))
    })
  }
}

Documentation and Help:

Is this wiki out of date? File an issue on GitHub and let us know.

41 questions
9
votes
3 answers

What is the point of Redux Promise and Redux Promise Middleware?

I've searched high and low but can't find a clear answer. I've managed to wrap my head around the mechanics of Redux, but when I've come to the point of API calls and async action creators, I'm stuck with middleware in context of Promises. Can you…
Joey
  • 409
  • 1
  • 3
  • 11
7
votes
2 answers

Why would I use Redux Promise Middleware over Redux Promise?

I've used Redux Promise, but it seems Redux Promise Middleware has more functionality like dispatching multiple actions with "PENDING" or "FULFILLED" appended. Why would I use one over the other?
user4703365
6
votes
1 answer

Typescript error "Property 'then' does not exist" when chaining promises with promise-middleware + thunk

I'm using redux-promise-middleware with redux-thunk in order to chain my promises: import { Dispatch } from 'redux'; class Actions { private static _dispatcher: Dispatch; public static get dispatcher(): Dispatch { return…
FuzzyTree
  • 32,014
  • 3
  • 54
  • 85
5
votes
2 answers

Should I catch Redux promise errors at dispatch or just handle it in the reducer?

So basically I am dispatching an action with thunk and redux-promise-middleware, which makes an API call that returns a promise. I then send the promise returned to another action creator as a 'payload' argument, which works with the…
5
votes
3 answers

React Redux adding extra field for action cause promise to return differently

I want to add a isLoading flag to my action generator and reset it at my reducer. Initially without the flag, my code works and the action looks like the following export function getList() { const FIELD = '/comics' let searchUrl = ROOT_URL…
ErnieKev
  • 2,831
  • 5
  • 21
  • 35
4
votes
1 answer

How to handle the return type of dispatch with Redux Promise Middleware?

Redux Promise Middleware seems to handle the promise resolution of an action payload. For example, consider this action creator that uses a Promise as payload: export default class ActionCreators { public static fetchAllUsers(): FetchAction { …
4
votes
2 answers

How can I add data to the pending action?

I am using Axios, Redux and Redux Promise Middleware. I have the following action creator: return { type: 'FETCH_USERS', payload: axios.get('http://localhost:8080/users', { params: { …
Baz
  • 12,713
  • 38
  • 145
  • 268
3
votes
1 answer

How to use redux-promise-middleware with react-scripts v3

I recently updated my react-scripts to version 3.0.0 in my React application and all of my actions stopped working. I am using redux-promise-middleware so I have always this pattern when fetching data: export const FIRST_ACTION =…
Smajl
  • 7,555
  • 29
  • 108
  • 179
3
votes
2 answers

Using redux-actions, redux-thunk and redux-promise-middleware in typescript

New to typescript + redux ecosystem here. How do I properly encapsulate type information into async actions when using redux-actions, redux-thunk and redux-promise-middleware in TypeScript? An example of authentication: /* actions */ const login =…
3
votes
2 answers

In Redux, what is the best way to post data to a server?

I want to post data to a server.. my action is like this: export function addNewTodo(text) { return { type: 'ADD_NEW_TODO', payload: addNewTodoApi(text) }; } let addNewTodoApi = function(text) { return new Promise(function(resolve,…
3
votes
2 answers

Add Loading Indicator for React-Redux app with Promise Middleware

I am new to react redux. I want to add a loading text when the user pressed the search button and dismiss the text when data comes back or the action completed. In a normal async function, I can just toggle the isLoading flag before and after the…
ErnieKev
  • 2,831
  • 5
  • 21
  • 35
2
votes
0 answers

Redux-thunk and redux-promise: empty payload in PENDING state

So I have redux-thunk set up and when I call the updateUser(userInfos) action, it returns a promise to update the server with those infos. But sequentially I need to update the local state with those infos too, and if I wait for…
Augustin Riedinger
  • 20,909
  • 29
  • 133
  • 206
2
votes
1 answer

Chaining Dispatched Actions with Redux Promise Middleware and JHipster

I am building a Jhipster React generated project. My problem is I couldn't manage to chain reducer functions. Simply, I want to chain getSession() function with another function in the authentication reducer. In my component I want to handle…
2
votes
1 answer

Use redux-thunk with redux-promise-middleware in the correct way

I'm working in a project with react and redux, I'm enough new so I'm trying to understand better how to use redux-thunk and redux-promise together. Below you can see my files, in my actions I created a fetch generic function apiFetch() in order to…
1
vote
3 answers

How should I type React's dispatch function to be able to do a "then" method like a Promise

I have a simple app which dispatches an action on first load to populate the store. I want to be able to run a then method on dispatch but typescript complains about this. (According to redux's documentation, the return value of dispatching an…
1
2 3