menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Channels
Team

React-hook-form and redux

December 19, 2019 at 2:13am

React-hook-form and redux

December 19, 2019 at 2:13am
Hi all, does anyone has a good example of how to use react-hook-form with redux?

December 19, 2019 at 2:17am
redux can be easily integrate with RHF
however the form state is independent with Redux
Thanks Bill, I saw that documentation before, but unfortunately it is not entirely clear. And I was wondering if somebody implemented it on a working app
we used redux a year ago at work
now switched to my open source project for state manamgent
let me know how can i make it clearer to help
Great! thanks a lot, we are looking at implementing it at work and replace all forms with React-hook-form, but we Do use Redux, at least for now.
I guess the rule is bascially let RHF handle the form
and submit data into Redux
and load data with Redux and RHF
What I have done just now is use useDispatch
This is just a test
import React from 'react'
import useForm from 'react-hook-form'
import { connect, useDispatch } from "react-redux";
import { addPatient } from "../actions";
import styled from 'styled-components'
const Wrapper = styled.div `margin: 50px;`
// The following component is an example of your existing Input Component
const Input = ({ label, register, required }) => (
<>
<label>{label}</label>
<input name={label} ref={register({ required })} />
</>
)
function ConnectedForm() {
const { register, handleSubmit } = useForm()
const dispatch = useDispatch();
const onSubmit = data => {
dispatch(addPatient(data))
}
return (
<Wrapper>
React-Hook-Form integrated with Redux
<form onSubmit={handleSubmit(onSubmit)}>
<Input
htmlFor="name"
name="name"
label="name"
register={register} required />
<Input
htmlFor="lastName"
name="lastName"
label="lastName"
register={register} required />
<input type="submit" />
</form>
</Wrapper>
)
}
const Hookform = connect()(ConnectedForm);
export default Hookform;
Edited
yeah looks good to me
this seems to work

January 21, 2020 at 10:48am
Hey, just saw this thread and it was helpful to sort out state management with Redux since I faced a similar issue understanding the example in the Docs. I'd suggest to use this example in the docs so it's easier for other people to integrate in their React-Redux apps. Anyway, great work, loving it so far :)
like-fill
1

February 28, 2020 at 5:31pm
Is there any way to pass useForm() methods down to a connect wrapped component. I have created something like:
// parent component const {register, errors} = useForm({ mode: "onChange", validationSchema: someschema });
<ConnectedComponent register={register} errors={errors} />
// ConnectedComponent const mergeProps = (state, dispatch, ownProps) => { return {...ownProps, ...state, ...dispatch} } connect(mapStateToProps, mapDispatchToProps, mergeProps)(Component)
// Component const Component => (props) => { return <input ref={register} /> };
// Component Not showing any validation error on change while working without connected component // while receiving register and errors props
Edited

June 11, 2020 at 8:24pm
Hi, how to show errors after redux dispatch action?

June 12, 2020 at 3:21am
setError?
so I've a react-hook-form which is modal after submiting I dispatch redux action, what I want is if there are no errors I want to close popup, if there are errors it should left opened. how to achive this?
thank you totally forgot that
Show more messages