Categories
Development

How to dispatch from react-hook-form + Redux

I’m using react-hook-form (https://react-hook-form.com/).
I would like to dispatch action from inside of react-hook-form.

In following case, I am supposed to dispatch using props.dispatch, when onSubmit is fired.

However I could not figure out how to dispatch.

import React from 'react'
import useForm from 'react-hook-form'

export default function App() {
  const { register, handleSubmit, watch, errors } = useForm()
  const onSubmit = data => { console.log(data) }

  console.log(watch('example')) // watch input value by passing the name of it

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="example" defaultValue="test" ref={register} />
      <input name="exampleRequired" ref={register({ required: true })} />      
      <input type="submit" />
    </form>
  )
}

Does anyone give me an advice?

class Sample extends Component {
    constructor(props){
        super(props);
        this.state = {
            mode: 'input'
        }
    }

    render() {
        switch (this.state.mode) {
            case 'input':
                return (<App />);
            case 'confirm':
                return (<App01 />);
            default:
                return (<App02 />);
        }
    }
}

export default connect()(Sample);

Leave a Reply

Your email address will not be published. Required fields are marked *