Question

基本上我想在成功提交表单后向用户显示消息。像Thanks. Product added一样。几秒钟后，我希望这条消息消失。

目前我的代码非常简单，包含3种AJAX请求操作类型（ADD_PRODUCT_REQUEST，ADD_PRODUCT_SUCCESS，ADD_PRODUCT_FAILURE）。

我的组件包含通过mapDispatchToProps连接到redux的表单：

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

我的动作创建者也很简单（伪代码）：

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

我如何使用这种“标准”react-redux架构知道AJAX请求在组件端成功执行？

我只有一个想法 - 添加一些值来通知产品已添加，例如added:true，但我认为这是个坏主意。

Answer 1

您必须在操作中返回获取结果，然后您需要包含then和catch语句以捕获操作结果，如下所示：

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

您可以将此示例处理绑定到表单验证或前端通知系统。

Redux：表单提交回调

1 个答案: