Индикатор сохранения в редукционной форме и долгое обещание

Я пытаюсь отобразить наложение пользовательского интерфейса во время процесса сохранения. Я отправляю изменение пользовательского интерфейса с помощью преобразователя, но проблема в том, что он ждет, пока обещание разрешится, прежде чем произойдет повторный рендеринг. В моем коде есть longPromise() (действие может занять около 10 секунд), поэтому в настоящее время он ждет 10 секунд, прежде чем появится индикатор.

Любые советы/шаблоны будут оценены. Заранее спасибо!

save(values, validate, props){

    const {
        dispatch,
        setOverlay
    } = props;

    return dispatch( setOverlay(true, 'Saving User...') )
        .then(() => {

             return longPromise();

        });

}

render(){

    const { handleSubmit } = this.props;

    return (
        <form onSubmit={ handleSubmit(this.save) }>
            <span>Form fields here</span>
        </form>
    )

}

reactjs redux redux-form jsx es6-promise
person Lee M    schedule 02.07.2017    source источник
comment
Возможный дубликат Как показать индикатор загрузки в приложении React Redux при получении данных?   -  person trixn    schedule 02.07.2017

Ответы (2)


arrow_upward
1
arrow_downward

Для этого вы можете использовать реквизит submitting. Это встроенная функция Redux Form< /а>.

render () {

    const { handleSubmit, submitting } = this.props;

    return (
        <form onSubmit={ handleSubmit(this.save) }>
            <span>Form fields here</span>
            <button type="submit" disabled={ submitting }>Submit</button>
        </form>
    )

}
person gustavohenke    schedule 10.07.2017

arrow_upward
0
arrow_downward

Об этом есть довольно хороший пример в редукс-репозиторий. В основном вам нужно будет отправить несколько действий в преобразователь и обновить состояние с помощью переменной, указывающей текущее состояние вашего запроса. Итак, после того, как вы начали извлекать, вы отправляете действие, которое устанавливает, например. isFetching в вашем состоянии на true, и вы визуализируете свой компонент с помощью счетчика. Когда запрос будет выполнен, ваш преобразователь отправит другое действие, указывающее на успех или неудачу и обновление, например. isFetching: false, error: false или isFetching: false, error: true в зависимости от результата вашего fetch запроса.

Если выполнение вашего промиса занимает 10 секунд, то вы, вероятно, не выполняете код, сохраняющий ваши данные асинхронно.

person trixn    schedule 02.07.2017
comment
Спасибо, я понимаю идею асинхронной выборки, но проблема здесь на самом деле в избыточной форме и сохранении, а также в том факте, что сохранение должно возвращать обещание, чтобы работать. Я думаю, что ваша идея полностью асинхронного действия с кодом — это только путь вперед. Многое происходит за кулисами, что приводит к 10-секундной задержке. - person Lee M; 02.07.2017
comment
@Lee M Да, вам придется сделать код асинхронным, чтобы ваш магазин мог обновлять индикатор isSaving или как бы вы его ни называли, а затем обновлять его снова, когда возвращается асинхронный код. - person trixn; 02.07.2017