redux-form Saving Indicator and long promise

Question

I'm trying to display a UI Overlay during the save process. I'm dispatch the ui change using a thunk, but the problem is it waits for the Promise to resolve before re-render occurs. There is a longPromise() in my code (can take around 10 seconds to action) so it's currently waiting 10 seconds before the indicator appears.

Any advice/pattern would be appreciated. Thanks in advance!

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

}

Possible duplicate of [How to show a loading indicator in React Redux app while fetching the data?](https://stackoverflow.com/questions/35456935/how-to-show-a-loading-indicator-in-react-redux-app-while-fetching-the-data) — trixn, Jul 02 '17 at 20:24

score 1 · Answer 1 · answered Jul 10 '17 at 00:47

You can use submitting prop for this. It's a built-in of 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>
    )

}

score 0 · Accepted Answer · answered Jul 02 '17 at 20:36

0

There is a pretty good example about this in the redux repo. Basically you will need to dispatch multiple actions in a thunk and update the state with a variable indicating the current state of your request. So after you started fetching you dispatch an action that sets e.g. isFetching in your state to true and you render your component with a spinner. When the request is done your thunk will dispatch another action indicating success or failure and updating e.g. isFetching: false, error: false or isFetching: false, error: true depending of the outcome of your fetch request.

If your Promise takes 10 seconds to complete then you probably do not execute the code that saves your data asynchronously.

answered Jul 02 '17 at 20:36

trixn

15,761
2
38
55

Thanks, I understand the idea of async fetching but the problem here is actually with redux-form and saving, and the fact the save has to return a promise in order to work. I think your idea about actioning the code completely asynchronously is only way forward. There's a lot going on behind the scenes causing the 10 second delay. – Lee M Jul 02 '17 at 20:43
@Lee M Yeah you will have to make the code async to allow your store to update the isSaving indicator or whatever you want to call it and then update it again when the async code returns. – trixn Jul 02 '17 at 20:46

redux-form Saving Indicator and long promise

2 Answers2