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
1
vote
1 answer

How to use Redux Promise Middleware with slices in Redux Toolkit?

I'm using the slices feature of Redux Toolkit. As you may know, one slice returns an action for every created reducer. I want to use the redux-promise-middleware library, which for a given ACTION_TYPE, it creates three possible new actions:…
Herman
  • 623
  • 1
  • 6
  • 10
1
vote
2 answers

How do I chain actions with Redux Promise Middleware?

I am quite new to React and Redux. I want to chain multiple API calls using redux-promise-middleware and implemented my actions as follows: locationActions.js: import { visitLocation } from '../services/actionService'; export const VISIT_LOCATION =…
Smajl
  • 7,555
  • 29
  • 108
  • 179
1
vote
1 answer

How to make a single loader reducer for whole application, React

I have an application in which I have multiple components as well as actions and reducers for each component. I am using redux-pack for promise handling as well. So here is the situation, I just want to use a single reducer for my whole application…
Abin Thaha
  • 4,493
  • 3
  • 13
  • 41
1
vote
1 answer

Why does Redux Promise Middleware not dispatch a rejected action for my example code?

I use fetch-mock, redux-mock-store, promise-middleware to test the redux implementation of my application. I have following code: import configureMockStore from 'redux-mock-store'; import promiseMiddleware from 'redux-promise-middleware'; import…
1
vote
1 answer

Redirect user with React-Router 4 and Redux-Promise

I have a simple use case which within the React-Router 4 and Redux environment seems pretty difficult to achieve. When a user logs in, a redux promise action is fired off which returns an API token, expiry date and some other info. When and if the…
1
vote
1 answer

Chaining redux payload with axios

I'm building a front-end using React and Redux (with promise middleware and thunk) for a WordPress backend (REST). Right now I'm doing simple dispatches with Redux to fetch page data, like this one for instance: export const fetchPostBySlug = (slug)…
Bob Wassermann
  • 349
  • 2
  • 7
  • 19
1
vote
1 answer

How to keep my reducer pure when using Redux Promise Middleware?

I'm using Redux Promise Middleware and my action creator returns an action with a promise. Now, in the reducer, I receive the resolved promise data and I have to 'provide' the new state. I also have to do something that is not 'pure' with that…
bobocu
  • 11
  • 1
1
vote
3 answers

Error handling redux-promise-middleware

I'm learning React, along with pretty much all the necessary technology around it all at once - so I often get tripped up by things I should probably know already. I've encountered a problem when it comes to error handling my async events. I've…
ndv
  • 23
  • 1
  • 4
1
vote
1 answer

Redux createStore error: Expected the reducer to be a function

I'm getting an error on createStore and I'm not understanding why. import { createStore, applyMiddleware, combineReducers, compose } from 'redux'; import thunk from "redux-thunk" import promise from "redux-promise-middleware" import * as reducers…
0
votes
0 answers

Why my site Reload When I execute some function using redux-persist?

Hey I ran into Problem I am using Redux Persist to persist Data in redux State But When i Click on Some Function like Save button or on Change it Reload the Page or redirect to HomePage I dont know why before using persist it was Fine here is my…
0
votes
1 answer

TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[4], "./index").applyMiddleware.apply')

I am creating a news application using react-native typescript. I want to use redux persist to store the state of application. If the application is being opened for first time I want to display the login page else I want to store the state of…
0
votes
0 answers

Correctly type an async action which goes through redux-promise-middleware

I'm using redux-promise-middleware for my Redux store setup and I'm trying to correctly type this async action: actions.ts export const theAsyncAction = (): { type: "MY_ACTION_TYPE"; payload: AxiosResponse; // [1] } => { const…
Mohsen Taleb
  • 645
  • 5
  • 16
0
votes
1 answer

How can I pass through additional metadata with Redux Promise Middleware?

With Redux Promise Middleware, we write action like this: export const withdraw=(id)=>{ return{ type: WITHDRAW, payload: (new PaypalContract()).withdraw(id), id } } Unfortunately, redux-promise-middleware won't pass…
Chan Austin
  • 2,260
  • 4
  • 14
  • 18
0
votes
2 answers

Unhandled Rejection (TypeError): this.props.dispatch(...).then is not a function

I am using redux-thunk and redux-promise together and somehow redux-thunk middleware does not get called and i get an error. THIS IS MY SETUP import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter} from…
0
votes
2 answers

react props comes blank on first transaction

I am using redux promise middleware. I am trying to pass the value in Propsx to state. Props comes empty in useEffect. How can I transfer the contents of the props to state. Props value comes next. action: export function fetchBasket() { return…
phoique
  • 97
  • 3
  • 7