react-redux: параллельный вызов нескольких API на componentDidMount

Мне нужно вызвать два API параллельно. И это важно, так как я хочу свести время page to load к минимуму.

  1. Если я вызову два API (как показано ниже) в componentDidMount, будет ли это асинхронным или нет.

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())
        }
    }

Будет ли вызов API1() и API2() выполняться параллельно или синхронно? И как я могу сделать это параллельно

  1. Я также хотел бы упомянуть, что мое приложение использует redux-thunk примерно так, как показано ниже, но я не совсем уверен, что именно делает этот код. Я прочитал https://redux.js.org/api-reference/applymiddleware что, применяя промежуточное программное обеспечение, мы можем заставить dispatch работать асинхронно.

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

reactjs redux asynchronous react-redux redux-thunk
person Rudrani Angira    schedule 09.07.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

По умолчанию метод отправки в библиотеке Reudx абсолютно синхронен. . Вы можете использовать редукцию с преобразователем (или аналогичным enhancers), чтобы удалить синхронный характер отправки, ваши отправленные события будут заключены в обещание при вызовеthunks.

Дополнительно, не относящееся к React/Redux:

Браузеры имеют ограниченное количество одновременных запросов на домен, определенное в спецификации HTTP (RFC2616). Перейдите по этой ссылке, чтобы узнать максимальное количество одновременных подключений для каждого семейства/версии браузера.

Ниже вы можете увидеть максимальное количество одновременных подключений к одному домену для некоторых браузеров.

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

Полезно знать: синхронные HTTP-запросы в основном потоке устарели из-за негативного влияния на работу пользователей Документ XMLHttpRequest.

Надеюсь, это поможет.

person Vladimir Banishevskii    schedule 10.07.2018

arrow_upward
1
arrow_downward

Будет ли вызов API1() и API2() выполняться параллельно или синхронно? И как я могу сделать это параллельно?

Они будут выполняться параллельно.

Я прочитал https://redux.js.org/api-reference/applymiddleware что, применяя промежуточное программное обеспечение, мы можем заставить диспетчеризацию работать асинхронно.

Да, ты прав. По умолчанию Redux не может обрабатывать асинхронные действия, поэтому вам следует рассмотреть возможность использования промежуточного программного обеспечения, такого как redux-thunk или saga.

person Roman Mahotskyi    schedule 10.07.2018