Redux: form submission callback

Question

Basically I want to show message to user after he successfully submitted form. Like Thanks. Product added. And after few seconds I want this message to disappear.

Currently my code is pretty straightforward and contains 3 action types for AJAX request (ADD_PRODUCT_REQUEST, ADD_PRODUCT_SUCCESS, ADD_PRODUCT_FAILURE).

My component containing form connected to redux via mapDispatchToProps:

import {addProduct} from '../actions/product';

const mapDispatchToProps = dispatch => ({
    onSubmit(productName) {
        dispatch(addProduct(productName))
    }
});
class AddProduct extends React.Component {
    addProduct() {
        const {onSubmit} = this.props; 
        onSubmit(this.productNameInput.val);
    }

    render() {
       return (
          <form onSubmit={::this.addProduct}>...</form>
       )
    }
}

And my action creator is also pretty straightforward (pseudocode):

export const addProduct = (name) => dispatch => {
    dispatch(addProductRequest())
    fetch(...).then(addProductSuccess()).catch(e => addProductFailure(error))     
}

How I can using this "standard" react-redux architecture know that AJAX request executed successfully on component side?

I have only 1 idea - add some value to state informing that product was added, like added:true, but I think it's bad idea.

See this https://stackoverflow.com/questions/46175901/returning-the-value-of-a-promise-to-another-function/46176029#46176029 — Shubham Khatri, Sep 14 '17 at 17:30
@ShubhamKhatri Even if I will return `Promise` from my action-creator, then anyway my component doesn't know anything about action creator. Only `mapDispatchToProps` can access to resulting promise. — WelcomeTo, Sep 14 '17 at 17:34
Why not use `ADD_PRODUCT_SUCCESS` to trigger a reducer that changes to the ID or name of the product added. You could create a component that takes the ID as a prop. When that prop changes it shows a success message for 3 seconds. After 3 seconds it could either dispatch an action and clear the value set in the ADD_PRODUCT_SUCCESS reducer, or use the component state to set a flag to hide the message — pizzarob, Sep 14 '17 at 17:34
No, you can then use `onSubmit().then()`, since mapDispatchToProps returns the function as a prop — Shubham Khatri, Sep 14 '17 at 18:05

score 0 · Answer 1 · answered Sep 15 '17 at 08:29

You must return fetch result in actions, then you need to wrap up then and catch statements to catch result of action, something like this:

addProduct() { 
    this.setState({ error: {}, isLoading: true });
    this.props.onSubmit(this.productNameInput.val)
     .then(res => this.setState({ isLoading: false, success: { title: "Success!", msg: "Product added!" } }))
     .catch(err => this.setState({ isLoading: false, error: err.response.data.error} }));
}

You can bind in future this example handling to your form validation or to your frontend notification system.

Redux: form submission callback

1 Answers1