Reagieren/Redux klare Formelemente Wert einreichen, nachdem

Question

Ich habe Probleme mit den Werten aus Eingabe und wählen Sie Formularelemente in react form Clearing nach erfolgreicher durch axios Bibliothek einreichen. Ich möchte nur erwähnen, dass ich redux-form nicht verwende.

Ich weiß nicht, ob ich auf dem richtigen Weg bin hier, das ist mein Workflow bei weitem: Ich schrieb ein Formular mit react-bootstrap, jedem Eingang und wählen Sie Wert durch Requisiten geben, und ich zugreifen und den Zustand durch diese Requisiten aktualisieren . Ich habe Aktionen und Reduzierungen geschrieben, um Eingabewerte zu aktualisieren, und eine Aktion wird in meiner Komponente ausgelöst, aber die zweite Aktion und der Reduzierer, der Werte nach dem Senden löschen soll, funktionieren nicht wie erwartet. Das ist das Hauptproblem, ich bin mir nicht sicher, ob ich das FORM_RESET-Aktionsformular an der richtigen Stelle absende, weil ich es in der Aktion, die für das Posten von Daten auf dem Server verantwortlich ist, und beim Erfolgsrückruf FORM_RESET absetze.

Unten ist der für dieses Problem relevante Code.

/* * actionRegister.js/

let _registerUserFailure = (payload) => { 
    return { 
     type: types.SAVE_USER_FAILURE, 
     payload 
    }; 
}; 
let _registerUserSuccess = (payload) => { 
    return { 
     type: types.SAVE_USER_SUCCESS, 
     payload, 
     is_Active: 0, 
     isLoading:true 
    }; 
}; 

let _hideNotification = (payload) => { 
    return { 
     type: types.HIDE_NOTIFICATION, 
     payload: '' 
    }; 
}; 

//asynchronous helpers 
export function registerUser({ //use redux-thunk for asynchronous dispatch 
    timezone, 
    password, 
    passwordConfirmation, 
    email, 
    name 
}) { 
    return dispatch => { 
     axios.all([axios.post('/auth/signup', { 
        timezone, 
        password, 
        passwordConfirmation, 
        email, 
        name, 
        is_Active: 0 
       }) 
       // axios.post('/send', {email}) 
      ]) 
      .then(axios.spread(res => { 
       dispatch(_registerUserSuccess(res.data.message)); 
       dispatch(formReset()); //here I dispatch clearing form data 
       setTimeout(() => { 
        dispatch(_hideNotification(res.data.message)); 
       }, 10000); 
      })) 
      .catch(res => { 
       dispatch(_registerUserFailure(res.data.message)); //BE validation and passport error message 
       setTimeout(() => { 
        dispatch(_hideNotification(res.data.message)); 
       }, 10000); 
      }); 
    }; 
} 

/* * actionForm.js/

//synchronous action creators 
export function formUpdate(name, value) { 
    return { 
     type: types.FORM_UPDATE_VALUE, 
     name, //shorthand from name:name introduced in ES2016 
     value 
    }; 
} 
export function formReset() { 
    return { 
    type: types.FORM_RESET 
    }; 
} 

/* * reducerRegister.js/

const INITIAL_STATE = { 
    error:{}, 
    is_Active:false, 
    isLoading:false 
}; 
const reducerSignup = (state = INITIAL_STATE , action) => { 
    switch(action.type) { 
    case types.SAVE_USER_SUCCESS: 
     return { ...state, is_Active:false, isLoading: true, error: { register: action.payload }}; 
     case types.SAVE_USER_FAILURE: 
     return { ...state, error: { register: action.payload }}; 
     case types.HIDE_NOTIFICATION: 
     return { ...state , error:{} }; 
    } 
     return state; 
}; 
export default reducerSignup; 

/* reducerForm. js */

const INITIAL_STATE = { 
    values: {} 
}; 
const reducerUpdate = (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
     case types.FORM_UPDATE_VALUE: 
      return Object.assign({}, state, { 
       values: Object.assign({}, state.values, { 
        [action.name]: action.value, 
       }) 
      }); 
     case types.FORM_RESET: 
     return INITIAL_STATE; 
     //here I need isLoading value from reducerRegister.js 
    } 
    return state; 
}; 
export default reducerUpdate; 

/* SignupForm.js */

import React, {Component} from 'react'; 
import {reduxForm} from 'redux-form'; 
import {connect} from 'react-redux'; 
import map from 'lodash/map'; 
import timezones from '../../data/timezones'; 
import styles from '../formElements/formElements.scss'; 
import {registerUser} from '../../actions/actionRegister'; 
import {formUpdate} from '../../actions/actionForm'; 
import FieldGroup from '../formElements/FieldGroup'; 
import { Form, FormControl, Col, Checkbox, Button, FormGroup } from 'react-bootstrap'; 


// {... props} passing large number of props wrap in object with spread notation 
class SignupForm extends Component { //if component have state it needs to be class 
    constructor(props) { 
     super(props); 
     this.state = { 
     errors: { //this errors are irrelevant for now 
      name:'', 
      email: '', 
      password: '', 
      passwordConfirmation:'', 
      timezone:'' 
     }, 
     }; 
    } 
    onChange = (event, index, value) => { 
     this.props.onChange(event.target.name, event.target.value); 
    }; 
    onSave = (event) => { 
     event.preventDefault(); 
     this.props.onSave(this.props.values); 
    } 
    render() { 
     let isLoading = this.props.isLoading; 
     return (
        // this.props.handleSubmit is created by reduxForm() 
     // if the form is valid, it will call this.props.onSubmit 
     <Form onSubmit={this.onSave} horizontal> 
    <FieldGroup 
    id="formControlsName" 
    type="text" 
    label="Name" 
    name="name" 
    placeholder="Enter Name" 
    value={this.props.values[name]} 
    onChange={this.onChange} 
    help={this.state.errors.name} 
    /> 
    <FieldGroup 
    id="formControlsEmail" 
    type="text" 
    label="Email" 
    name="email" 
    placeholder="Enter Email" 
    value={this.props.values[name]} 
    onChange={this.onChange} 
    help={this.state.errors.email} 
    /> 
    <FieldGroup 
    id="formControlsPassword" 
    type="password" 
    label="Password" 
    name="password" 
    placeholder="Enter Password" 
    value={this.props.values[name]} 
    onChange={this.onChange} 
    help={this.state.errors.password} 
    /> 
    <FieldGroup 
    id="formControlsPasswordConfirmation" 
    type="password" 
    label="Password Confirmation" 
    name="passwordConfirmation" 
    placeholder="Enter Password" 
    value={this.props.values[name]} 
    onChange={this.onChange} 
    help={this.state.errors.passwordConfirmation} 
    /> 
    <FieldGroup 
    id="formControlsTimezone" 
    label="Time Zone" 
    name="timezone" 
    placeholder="Select Time Zone" 
    componentClass="select" 
    defaultValue="Select Your Timezone" 
    value={this.props.values[name]} 
    onChange={this.onChange} 
    help={this.state.errors.timezone} 
    > 
    <option value="Select Your Timezone">Select Your Timezone</option> 
     { 
     map(timezones, (key, value) => 
     <option key={key} value={key}>{value}</option>) 
     } 
    </FieldGroup> 
    <FormGroup> 
     <Col smOffset={4} sm={8}> 
     <Checkbox>Remember me</Checkbox> 
     </Col> 
    </FormGroup> 
    <FormGroup> 
    <Col smOffset={4} sm={8}> 
    <Button type="submit" disabled={isLoading} 
     onClick={!isLoading ? isLoading : null} 
    > 
    { isLoading ? 'Creating...' : 'Create New Account'} 
     </Button> 
    </Col> 
     </FormGroup> 
     {this.props.errorMessage && this.props.errorMessage.register && 
      <div className="error-container">{this.props.errorMessage.register}</div>} 
    </Form> 
      //this.setState({ disabled: true }); 
      //this.props.errorMessage.register == this.props = {errorMessage :{ register: ''}} 
     ); 
    } 
} 
function mapStateToProps(state) { 
    return { 
     errorMessage: state.signup.error, 
    isLoading: state.signup.isLoading, 
    values: state.form.values 

    }; 
} 
function mapDispatchToProps(dispatch) { 
    return { 
    onSave: (values) => dispatch(registerUser(values)), 
    onChange: (name, value) => dispatch(formUpdate(name, value)) 
    }; 
} 
export default connect(mapStateToProps, mapDispatchToProps)(SignupForm) 

;

Answer 1

würde ich vorschlagen, in redux-form Bibliothek zu suchen. Es bietet Konfigurationsoptionen zum Löschen von Feldern nach dem Senden aus der Box.

Answer 2

Es gibt keine Notwendigkeit, redux-form zu verwenden :-) Sie sind auf dem richtigen Weg, und Sie rufen FORM_RESET Aktion an der richtigen Stelle.

Paar Dinge:

• sind Sie sicher, dass Sie formReset in actionRegister.js importieren?

• in reducerForm würde ich vorschlagen, noch hier neuen Zustand zurückzukehren:

  case types.FORM_RESET: return { ...INITIAL_STATE }; // or Object.assign({}, INITIAL_STATE)

Und btw. Warum setzen Sie isLoading: true auf Erfolg?Ich würde 3 Aktionen erstellen vorschlagen statt 2:

• SAVE_USER_START (die Sie dispatch vor dem Senden einer Anfrage), gesetzt isLoading zu true,
• SAVE_USER_SUCCESS - Set isLoading-false
• SAVE_USER_FAILURE - Set isLoading zu false