react-redux: Call multiple apis parallely on componentDidMount

Question

I need to call two apis parallely. And this is important as I want to keep the time for the page to load to minimum.

If I call the two apis (like below) in componentDidMount then would it be asynchronous or not.

class Test extends Component{
  constructor(args) {
            super(args)
            this.state = {
               ...
            };
            ...
        }

        componentDidMount() {
            //api1() and api2() are like .get(url).then()
            this.props.dispatch(actions.api1())     
            this.props.dispatch(actions.api2())
        }
    }

Would call to api1() and api2() will be done in parallel or synchronously?And how can I do that parallely

I would also like to mention that my application uses redux-thunk something like below but I am not exactly sure what this code is exactly doing. I have read https://redux.js.org/api-reference/applymiddleware that by applying middleware we can make dispatch work asynchronously.


import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { createLogger } from 'redux-logger'
import axios from 'axios'
import { routerMiddleware } from 'react-router-redux'

import InitialState from './InitialState'


const middleware = [ thunk.withExtraArgument(axios), routerMiddleware(history) ]

/* eslint-enable no-undef */

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(
    rootReducer,
    InitialState,
    composeEnhancers(applyMiddleware(...middleware))
)

export default store

score 1 · Answer 1 · answered Jul 10 '18 at 00:15

Would call to api1() and api2() will be done in parallel or synchronously? And how can I do that parallel?

They will be done in parallel.

I have read https://redux.js.org/api-reference/applymiddleware that by applying middleware we can make dispatch work asynchronously.

Yes, you are right. By default redux is not able to handle asynchronous actions, therefore you should consider to use middlewares like redux-thunk or saga.

score 1 · Accepted Answer · answered Jul 10 '18 at 19:03

By default dispatch method in Reudx library is absolutely synchronous. You can use redux with thunk (or similar enhancers) to remove synchronous nature of dispatch, your dispatched events will be wrapped in a Promise when invokingthunks.

Additionally, not related to React / Redux:

The browsers have limited number of simultaneous requests per domain which defined in the HTTP specification (RFC2616). Check this link to see maximum number of simultaneous connections per browser family / version.

Below you can see the maximum number simultaneous connection to the same domain for some of the browsers.

+---------+-------------+
| Browser | Connections |
+---------+-------------+
| IE 8, 9 |           6 |
| IE 10   |           8 |
| IE 11   |          13 |
| Chrome  |           6 |
| Safari  |           6 |
| Opera   |           6 |
+---------+-------------+

Nice to know: Synchronous http requests on the main thread have been deprecated due to the negative effects to the user experience XMLHttpRequest Doc.

Hopefully it helps.

react-redux: Call multiple apis parallely on componentDidMount

2 Answers2