Redux - React Hook Form connectivity

Question

我在react项目中使用react-hook-form v7和redux-toolkit。我在FormContext下有多个表单。是否有办法同步表单的数据与redux存储同步?实际上，在官方文档中有关于这方面的信息，但我并没有完全理解redux connect是如何工作的以及updateAction是什么意思。

import { useForm } from "react-hook-form";
import { connect } from "react-redux";
import updateAction from "./actions";
export default function App(props) {
const { register, handleSubmit, setValue } = useForm({
defaultValues: {
firstName: '',
lastName: '',
}
});
// Submit your data into Redux store
const onSubmit = data => props.updateAction(data);

return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("firstName")} />
<input {...register("lastName")} />
<input type="submit" />
</form>
);
}
// Connect your component with redux
connect(({ firstName, lastName }) => ({ firstName, lastName }), updateAction)(YourForm);

redux存储应该如下所示:

{
// other state values
lorem : {...},
ipsum : {...},
// form state values
form1: {
input1: ...,
...,
}
// OR
formContext: {
form1: {..}
}

Answer 1

可能有其他方法可以做到这一点，但我使用watch

const { watch } = useForm({ mode: "all" }}

如果想要同步更新，在useForm上使用默认的onSubmit以外的模式是很重要的。我使用mode: "all"，它触发blur和change事件的更新。

---

使用createSlice创建redux切片

export const formSlice = createSlice({
name: "form",
initialState: {
firstName: "",
lastName: "",
},
reducers: {
updateForm(state, action) {
return { ...state, ...action.payload };
},
},
});
export const { updateForm } = formSlice.actions;
export default formSlice.reducer;

---

订阅watch并调度updateForm

useEffect(() => {
const subscription = watch((value) => {
dispatch(updateForm(value));
});
return () => subscription.unsubscribe();
}, [dispatch, watch]);

codesandbox