У меня есть компонент, который запускает асинхронное действие, которое инициирует вызов API и возвращает Promise. Если нам просто нужны данные из выполненного обещания, все просто:
class ProgressBar extends React.Component {
state = { progress: false };
componentDidMount() {
this.props.check().then((result) => {
this.setState({ progress: result });
})
}
render() {
return (<div>Progress status: {this.state.progress}</div>);
}
}
function mapDispatchToProps(dispatch) {
return {
check: bindActionCreators(CHECK_PROGRESS, dispatch)
};
}
export default connect(null, mapDispatchToProps)(ProgressBar);
в промежуточном программном обеспечении:
case CHECK_PROGRESS: {
return Promise.resolve(true);
}
Теперь, если у меня есть API, который возвращает статус выполнения при последующих вызовах, мое промежуточное ПО может превратиться в нечто подобное (не обращая внимания на ужасный стиль, это может быть повтор или другие вещи, такие как многошаговый вызов API):
case CHECK_PROGRESS: {
return Promise.resolve(0.1)
.then((result) => {
// Report `result=0.1` back to component
return Promise.resolve(0.5);
})
.then((result) => {
// Report `result=0.5` back to component
return Promise.resolve(0.7);
})
.then((result) => {
// Report `result=0.7` back to component
return Promise.resolve(1);
});
}
Очевидно, что обработка компонента .then
получит управление только после того, как все этапы промежуточного программного обеспечения уже будут выполнены.
Что было бы хорошим решением для этого шаблона для отправки текущих обновлений для компонента? Первая идея - поставить
store.dispatch({type: PROGRESS_UPDATED, result}))
на каждом этапе, но использование глобального хранилища не кажется хорошей практикой, если данные относятся только к этому компоненту. Является ли добавление аргумента callback
к действию хорошей идеей или нет?