Множественная отправка в componentDidMount

Я хочу сделать несколько запросов в componentdidmount прямо сейчас, это то, что я делаю,

componentDidMount() {
   const {
     getVehicleGroup,
     getDrivers,
     getFuelTypes,
     getUnassignedDevices,
     getCarMake
   } = this.props;
   getVehicleGroup();
   getDrivers();
   getFuelTypes();
   getUnassignedDevices();
   getCarMake();
}

и ко всем этим действиям прилагается сага. Теперь я хочу запустить другую функцию, но только по этим запросам. Это то, что я ищу

Promise.all([getVehicleGroup, getDrivers, getFuelTypes, getUnassignedDevices, getCarMake])
 .then(anotherFunction)

Вот моя карта

const mapDispatchToProps = (dispatch) => ({
 getVehicleGroup: () => dispatch(vehicleGroupRequest()),
 getDrivers: () => dispatch(driverRequest()),
 getFuelTypes: () => dispatch(fuelTypeRequest()),
 getCarMake: () => dispatch(carMakeRequest()),
 getUnassignedDevices: () => dispatch(unassignedDevicesRequest()),
 updateCurrentDriver: () => dispatch(change('addVehicleForm', 'FK_driver_id', [])),
 onSubmitForm: () => dispatch(addVehicleRequest())
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
737
2

Ответы 2

Хотя я в основном использую redux thunk, я думаю, что в вашем случае он должен быть аналогичным. Попробуйте сделать в своей функции mapDispatch следующее:

 getVehicleGroup: () => async dispatch(vehicleGroupRequest())

Асинхронные функции оборачиваются как обещания и ведут себя в основном одинаково, что позволяет вам делать что-то вроде: Promise.All([]).then(nextAction)

ИМХО два самых "изящных" способа:

  • с чистыми сагами: вы отправляете еще одно действие, чтобы начать сагу, что take все действия, которые вы хотите подождать, прежде чем запускать anotherFunction (но, в зависимости от того, что вы хотите сделать с anotherFunction, это может быть бесполезно)

  • вы можете использовать redux-saga-thunk, чтобы получить обещание от каждой саги, которую вы начинаете, и получить все преимущества redux-thunk. Я не использовал его напрямую, но сделаю, как только мне понадобится сделать что-то подобное

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

Adil Liaqat 22.11.2018 13:47

Итак, мое первое решение могло бы соответствовать вашей цели, или вы могли бы использовать или, в качестве альтернативы, вы могли бы использовать mergeProps (третий параметр Redux connect), чтобы добавить еще одну опору к вашему компоненту, как только все загруженные списки будут готовы. Подготовьте мне работающее репозиторий Github, и я посмотрю

NoriSte 22.11.2018 17:58

Другие вопросы по теме