Как мне реализовать загрузочный счетчик при отправке формы с помощью response-redux? - PullRequest
Новая
       9

Как мне реализовать загрузочный счетчик при отправке формы с помощью response-redux?

0 голосов
/ 17 апреля 2020

В моем приложении React есть форма, которая передает данные формы создателю действия, а затем моему редукторному редуктору при отправке. Я хотел бы, чтобы загрузочный счетчик отображался внутри кнопки отправки при ее нажатии, а затем удалялся при возврате данных. Я запутался в том, как это реализовать. Я думал о том, чтобы сохранить loading : true/false в моем состоянии приращения, но тогда он не будет изменен сразу после нажатия кнопки отправки, так как мое действие не отправляется на мой редуктор, пока оно не получит данные обратно из API бэкэнда с помощью ax ios. Я также думал о том, чтобы сохранить loading : true/false в состоянии компонента, но я чувствую, что это не лучший способ go.

Мой компонент: 

class SignUp extends Component{
    state = {
        userdetails : {
            firstname : '',
            lastname : '',
            email : '',
            password : '',
        },
        error_message : '',
        loading : false,
    }


    handleSubmit = (e) =>{
        e.preventDefault()
        this.setState({loading:true,})
        this.props.signup(this.state.userdetails);
    }
    loadingChecker = () =>{
        switch(this.state.loading){
            case  true:
                return <div class="loader"></div>
            case false:
                return <p>Login</p>

        }
    }
    render(){
        return(
            <div className="signup">
                    <div className="left col-sm-12 col-lg-6 d-none d-lg-block"></div>
                    <div className="right col-sm-12 col-lg-6">
                        <div className="rightinner col-sm-12 col-lg-8">
                            <p className="signupheader"></p>
                            <p className="signupsubheader"></p>
                            <p>{this.props.token}</p>
                            <form onSubmit={this.handleSubmit}>
                                <input className="inputs" id="firstname" type="text" placeholder="First Name" onKeyUp={this.handleUpdate}/>
                                <input className="inputs" id="lastname" type="text" placeholder="Last Name" onKeyUp={this.handleUpdate}/>
                                <input className="inputs" id="email"type="text" placeholder="Email" onKeyUp={this.handleUpdate}/>
                                <input className="inputs" id="" type="text" placeholder onKeyUp={this.handleUpdate}/>
                                <input type="password" name="" id="password" className="inputs" placeholder="Password" onKeyUp={this.handleUpdate}/>
                                <p className="error_message">{this.state.error_message}</p>
                                <p className="error_message">{this.props.error_message}</p>
                                <button type="submit" className="submit" disabled>{this.loadingChecker()}</button>
                                <p className="alreadysignedup">Already have an account? <Link to="/login">Login</Link></p>
                            </form>
                        </div>
                    </div>
            </div>
        )
    }
}
const mapStateToProps = (state) =>{
    return{
        error_message : state.signup.userdetails.error_message,
        first_name : state.signup.userdetails.first_name,
        last_name : state.signup.userdetails.last_name,
        email : state.signup.userdetails.email,
        token : state.signup.userdetails.token,
        loading : state.signup.loading,
    }
}
const mapDispatchToProps = (dispatch) =>{
    return{
        signup : (details) => dispatch(signUpAction(details))
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(SignUp);

Мое действие: 

import axios from 'axios';

export const signUpAction = (details) =>{
    return( dispatch, getState ) => {
        axios.post('http://127.0.0.1:8000/signup',details)
            .then(resp => {dispatch({type:'SIGNUP', payload:resp.data})})
        // dispatch({type:'SIGNUP', payload:details,})
    }
};

Мой редуктор: 

const initState = {
    userdetails : {
        firstname : '',
        email : '',
        lastname : '',
        token : '',
    },
    error_message : '',
}

const signUpReducer = (state = initState, action) =>{
    switch(action.type){
        case 'SIGNUP':
            if(action.payload === "error"){
                return {...state, error_message:'This email address is alredy being used by another account'};
            }else{
                console.log(state.userdetails)
                return {userdetails : {...state.userdetails, firstname:action.payload.firstname, lastname:action.payload.lastname, email:action.payload.email, token:action.payload.token,}};
            }
        case 'LOGIN':
    }
    return state;
}

export default signUpReducer;
...