Reactjs - Redux: Clearing forms without redux-form

Question

I'm new to redux and I'm making a component without the use of redux-form. Is there a way to clear any forms without using redux-form? For example I input abcd and clicked the submit button, if the submission is successful the input field should be cleared/cleaned.

here's my component

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {  saveSomething } from '../../actions'

class InputSomething extends Component {

state={
	inputValue: ""
}

handleInput = (key, e) => {
this.setState({[key]: e.target.value})
}

save(){
	this.props.saveSomething()
}

render(){
  return(
    <input type="text" value={this.state.inputValue} onChange={this.handleInput.bind(this, 'inputValue')}/>
    <input type="submit" onClick={this.save}/>
	)}
}

const mapStateToProps = state => {
  return {
    saveRetun: state.saveReturn
  }
}

export default connect(mapStateToProps, { saveSomething })(InputSomething)

here's my action

import axios from 'axios'
import {
  SAVE_SOMETHING,
  SAVE_SOMETHING_SUCCESS,
  SAVE_SOMETHING_FAILED
} from './types'



export const saveSomething = () =>{
  var url = '/someurlhere'
  return(dispatch)=>{
    dispatch({type:SAVE_SOMETHING})
    axios.post(url)
    .then((res)=>{
      dispatch({
        type:SAVE_SOMETHING_SUCCESS, payload:res.data
      })
    })
    .catch((error)=>{
        dispatch({
            type:SAVE_SOMETHING_FAILED, payload:error
          })
      })
  }
}

and here's my reducer

import {
  SAVE_SOMETHING,
  SAVE_SOMETHING_SUCCESS,
  SAVE_SOMETHING_FAILED
} from '../actions/types'

const INITIAL_STATE = { loading: true, data : [], error: '' , success: false };

export default (state = INITIAL_STATE, action) => {
  switch (action.type){
    case SAVE_SOMETHING:
      return {...state, loading: true}
    case SAVE_SOMETHING_SUCCESS:
      return {...state, loading: false, data: action.payload, success: true}
    case SAVE_SOMETHING_FAILED:
      return {...state, loading: false, error: action.payload, success: false}
    default:
      return state
  }
};

Thanks in advance :)

Ezra Chu · Accepted Answer · 2017-07-21 04:48:29Z

2

You just need to reinitialize the component with the initial data on success.

export default (state = INITIAL_STATE, action) => {
  switch (action.type){
    case SAVE_SOMETHING:
      return {...state, loading: true}
    case SAVE_SOMETHING_SUCCESS:

      // reset to initial data

      return {data: [], loading: false, success: true}

    case SAVE_SOMETHING_FAILED:
      return {...state, loading: false, error: action.payload, success: false}
    default:
      return state
  }
};

edited Jul 21, 2017 at 4:48

answered Jul 21, 2017 at 4:08

Ezra Chu

8224 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

costal oktopus · Accepted Answer · 2019-04-28 17:57:02Z

1

save(){
this.props.saveSomething().then(this.setState({inputValue:''}))
}

the above code will set the state to blank.

save(){
this.props.saveSomething()
 .then(this.setState({inputValue:''}), this.forceUpdate())
}

answered Apr 28, 2019 at 17:57

costal oktopus

3292 silver badges12 bronze badges

Collectives™ on Stack Overflow

Reactjs - Redux: Clearing forms without redux-form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest