I'm using react-hook-form (/). 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 and update state by setState.

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

export default function App(props) {
  const { register, handleSubmit, watch, errors } = useForm()
  const onSubmit = data => { 
           console.log(data);
           props.dispatch({type: 'CONFIRM'}); //--> Worked!!  
        }

  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((state)=>state)(Sample);

I'm using react-hook-form (https://react-hook-form./). 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 and update state by setState.

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

export default function App(props) {
  const { register, handleSubmit, watch, errors } = useForm()
  const onSubmit = data => { 
           console.log(data);
           props.dispatch({type: 'CONFIRM'}); //--> Worked!!  
        }

  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((state)=>state)(Sample);

• javascript
• reactjs
• redux
• react-hook-form

• Has nothing to do with useForm. You need to connect() your App, then you have props.dispatch – colburton Commented Dec 6, 2019 at 15:30
• I added export default connect((state)=>state)(App); the end of code as if ponent class do. However I don't get props inside of App(). I think it is not ponent class, but function I thought. – tajihiro Commented Dec 6, 2019 at 15:36
• You are not accepting props yet, should be: export default function App(props) – colburton Commented Dec 6, 2019 at 15:38
• How can I give props from the parent ponent <App />? – tajihiro Commented Dec 6, 2019 at 15:43

2 Answers 2

Using dispatch with redux has nothing to do with react-hook-form library.

If you using redux-hooks, which is an alternative for connect and a better approach if you using hooks anyway with react-hook-form:

React's new "hooks" APIs give function ponents the ability to use local ponent state, execute side effects, and more.

React Redux now offers a set of hook APIs as an alternative to the existing connect() Higher Order Component. These APIs allow you to subscribe to the Redux store and dispatch actions, without having to wrap your ponents in connect().

import { useDispatch } from 'react-redux';
function App() {
  const dispatch = useDispatch();
  // use distpach
}

If you using connect:

import { connect } from 'react-redux';
function App({ dispatch }) {
  // use dispatch
}

export default connect()(App);

I figured out. I am using bineReducers. It is distracted. I should have written like following.

bineReducers({
    sample01: sample01Reducer, sample02: sample02Reducer,    //Reducers

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

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

export default connect((state)=>state)(Sample);