React项目中react-hook-form v7与Redux Toolkit表单同步问题

核心结论 #

完全可以把FormContext中的多表单数据同步到Redux Store，下面拆解实现逻辑和你疑惑的核心点。

一、搞懂connect和updateAction #

1. connect的作用 #

connect是React-Redux的高阶组件，用来绑定React组件和Redux Store：

• 第一个参数mapStateToProps：把Redux Store里的状态映射为组件props，比如你代码里({ firstName, lastName }) => ({ firstName, lastName })，就是把Store里的这两个字段传给组件当props用。
• 第二个参数mapDispatchToProps：把Redux的action创建函数包装成组件的props方法，你代码里的updateAction就是这类函数，组件通过props.updateAction(data)就能触发action更新Store。

2. updateAction是什么 #

updateAction是你自己定义的Redux Action创建函数，作用是生成一个包含更新指令的action对象，Redux的Reducer会根据这个action修改Store状态。用Redux Toolkit的话，写法大概是这样：

// features/formSlice.js
import { createSlice } from '@reduxjs/toolkit';

const formSlice = createSlice({
  name: 'form',
  initialState: {
    form1: { input1: '', input2: '' },
    form2: { username: '', password: '' }
  },
  reducers: {
    updateFormData: (state, action) => {
      // action.payload包含表单ID和要更新的数据
      const { formId, data } = action.payload;
      state[formId] = { ...state[formId], ...data };
    }
  }
});

// 这里的updateFormData就是你代码里的updateAction
export const { updateFormData } = formSlice.actions;
export default formSlice.reducer;

二、多表单（FormContext下）同步到Redux的实现步骤 #

1. 配置Redux Store #

先把表单相关的slice加入Store：

// store.js
import { configureStore } from '@reduxjs/toolkit';
import formReducer from './features/formSlice';
import loremReducer from './features/loremSlice';
import ipsumReducer from './features/ipsumSlice';

export const store = configureStore({
  reducer: {
    lorem: loremReducer,
    ipsum: ipsumReducer,
    form: formReducer // 挂载表单状态
  }
});

2. 表单同步到Redux的两种方式 #

方式一：提交时同步（适合非实时场景）

import { useFormContext } from 'react-hook-form';
import { useDispatch } from 'react-redux';
import { updateFormData } from './features/formSlice';

function Form1() {
  const { register, handleSubmit } = useFormContext();
  const dispatch = useDispatch();

  const onSubmit = (data) => {
    // 提交时把表单1的数据同步到Redux，用formId区分多表单
    dispatch(updateFormData({ formId: 'form1', data }));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("input1")} />
      <input {...register("input2")} />
      <button type="submit">提交</button>
    </form>
  );
}

方式二：实时同步（输入时同步）

用watch监听表单变化，实时触发action：

import { useFormContext, watch } from 'react-hook-form';
import { useDispatch } from 'react-redux';
import { updateFormData } from './features/formSlice';
import { useEffect } from 'react';

function Form1() {
  const { register } = useFormContext();
  const dispatch = useDispatch();
  const formData = watch(); // 监听整个表单的字段变化

  useEffect(() => {
    // 数据变化时同步到Redux
    dispatch(updateFormData({ formId: 'form1', data: formData }));
  }, [formData, dispatch]);

  return (
    <form>
      <input {...register("input1")} />
      <input {...register("input2")} />
    </form>
  );
}

3. 从Redux读取默认值 #

如果需要把Redux里的状态作为表单初始值，初始化useForm时传入即可：

import { useForm, FormProvider } from 'react-hook-form';
import { useSelector } from 'react-redux';

function FormContainer() {
  const form1Data = useSelector(state => state.form.form1);
  const methods = useForm({
    defaultValues: form1Data // 用Redux状态作为表单默认值
  });

  return (
    <FormProvider {...methods}>
      <Form1 />
    </FormProvider>
  );
}

三、更推荐的Hooks写法（替代connect） #

你代码里的connect是旧写法，现在React-Redux更推荐用useSelector和useDispatch这两个Hooks，不需要高阶组件包裹，写法更简洁：

• useSelector：替代mapStateToProps，从Store取状态
• useDispatch：替代mapDispatchToProps，获取dispatch方法触发action

四、多表单Store结构建议 #

推荐按表单ID分组管理状态，方便区分多个表单：

{
  lorem: {...},
  ipsum: {...},
  form: {
    form1: { input1: '', input2: '' },
    form2: { username: '', password: '' }
  }
}

内容的提问来源于stack exchange，提问作者maybe