如何从 react-hook-form + Redux 调度

Question

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 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);

Answer 1

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 components the ability to use local component 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 components 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);

Answer 2

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

combineReducers({
    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);