在React Redux中显示有关成功获取请求的警报

Question

我正在我的react＆redux应用程序中更新用户。并且在成功更新即获取（PUT）请求时，我想显示一条警报消息“用户已成功更新”。但是我没有任何办法做同样的事情。以下是我的组件，动作和减速器代码。

userComponent.js

import React from 'react';
import {updateUserData} from '../redux/actions/user';

const mapStateToProps = (state) =>{
    return{
        updating_user_pending: state.usersData.updating_user_pending,
    }
}

const mapDispatchToProps = (dispatch) =>{
    return{
        updateUserAction: (data) =>{dispatch(updateUserData(data))}
    }
}

onSubmit(values) {
    this.props.updateUserAction(values);
}

Class Users extends React.Component{
    constructor(){
      super();
      this.onSubmit = this.onSubmit.bind(this);
    }
    render(){
      return(
         <form className="form" onSubmit={handleSubmit(this.onSubmit)}>
            <div className="form-group">
              <label className="label">First Name</label>
              <Field className="form-control" name="first_name" component="input" type="text" />
            </div>

            <div className="form-group">
              <label className="label">Email</label>
              <Field className="form-control" name="email" component="input" type="email" />
            </div>

            <button className="btn btn-primary">{(updating_user_pending)?'Submitting...':'Submit'}</button>
         </form>
      );  
}

export default connect(mapStateToProps,mapDispatchToProps)(Users);

action.js

export function updateUserData(data){
    return function(dispatch){
        dispatch({type: UPDATE_USER_PENDING});
        fetch('https://reqres.in/api/users/'+data.user_id, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(res=>{
            if(res.status===200){
                dispatch({type: UPDATE_USER_SUCCESS});
            }else{
                dispatch({type: UPDATE_USER_FAILED});
            }
        })
        .catch(err=>{
            dispatch({type: UPDATE_USER_FAILED});            
        })
    }
}

reducer.js

import {
    UPDATE_USER_PENDING,
    UPDATE_USER_SUCCESS,
    UPDATE_USER_FAILED
} from '../actions/action-types';

const initialState = {
    updating_user_pending:false
}

const userReducer = function(state = initialState, action) {
    switch(action.type) {
        case UPDATE_USER_PENDING:
            return {
               ...state,
               updating_user_pending: true
            }
        case UPDATE_USER_SUCCESS:
            return {
               ...state,
               updating_user_pending: false
            }
        case UPDATE_USER_FAILED:
            return {
               ...state,
               updating_user_pending: false
            }                                    
        default: 
            return state;
    }
}

export default userReducer;

上面的代码很容易理解。在这方面的任何帮助将不胜感激。

Answer 1

我认为Users组件中缺少一些代码，您可以在该组件上写更多详细信息吗？

还有一件事，为什么要在类之外定义onSubmit函数？