如何在TypeScript项目中正确结合Redux使用react-hook-form

你当前的写法存在几个原则性问题，靠打补丁绕开bug才会导致代码冗余难维护：

• 在组件渲染函数顶层直接调用setError，违反React渲染流程规则，靠判断错误是否存在绕开无限重渲染属于临时补丁，后续加字段很容易复现循环问题
• 直接修改Redux注入的props值（props.response.signup.userName = false），违反Redux单向数据流要求，Redux状态只能通过action更新，直接修改会导致状态不可追溯、UI和状态不一致
• 表单错误、服务端错误两份状态完全割裂，每个字段单独写判断逻辑，重复代码多
• 大量使用any类型绕过TS检查，没有发挥类型约束的作用

核心思路是理顺状态流转逻辑：

• 客户端校验完全交给React Hook Form内置规则处理
• 服务端校验状态统一存在Redux中，通过副作用（useEffect）同步到React Hook Form的内部错误状态，不在渲染层做状态同步
• 提交请求时自动清空历史服务端错误，用户修改输入时React Hook Form会自动清除对应字段错误，不需要手写清空逻辑
• 全链路补全TS类型，去掉所有any

第一步：补全类型定义 #

从根上做类型约束，避免无类型的自由操作：

// 表单字段类型
interface SignupFormInputs {
  userName: string;
  password: string;
  email: string;
  firstName: string;
  lastName: string;
}

// 服务端返回的校验错误格式
type ServerValidationErrors = Partial<Record<keyof SignupFormInputs, string[]>>;

// Redux中认证模块的状态类型
interface AuthState {
  signup: {
    loading: boolean;
    errors: ServerValidationErrors;
    success: boolean;
  }
}

// 整个Redux根状态类型
type RootState = {
  auth: AuthState;
};

第二步：规范Redux状态逻辑 #

用Redux Thunk处理异步提交，所有状态修改都通过action触发，禁止直接修改state：

// 同步action定义
const signupRequest = () => ({ type: 'auth/signupRequest' as const });
const signupSuccess = () => ({ type: 'auth/signupSuccess' as const });
const signupFailure = (errors: ServerValidationErrors) => ({
  type: 'auth/signupFailure' as const,
  payload: errors
});
const clearSignupErrors = () => ({ type: 'auth/clearSignupErrors' as const });

// 异步注册action
export const userSignupAction = (formData: SignupFormInputs) => async (dispatch: Dispatch) => {
  dispatch(signupRequest());
  // 提交前清空历史错误
  dispatch(clearSignupErrors());
  try {
    // 替换为实际接口请求
    const res = await fetch('/api/signup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });
    if (res.status === 400) {
      const errorData = await res.json();
      dispatch(signupFailure(errorData));
      return;
    }
    if (!res.ok) throw new Error('Request failed');
    dispatch(signupSuccess());
  } catch (err) {
    console.error('Signup failed:', err);
  }
};

// 对应reducer
const initialAuthState: AuthState = {
  signup: { loading: false, errors: {}, success: false }
};

const authReducer = (
  state = initialAuthState,
  action: ReturnType<typeof signupRequest | typeof signupSuccess | typeof signupFailure | typeof clearSignupErrors>
) => {
  switch (action.type) {
    case 'auth/signupRequest':
      return { ...state, signup: { ...state.signup, loading: true, errors: {} } };
    case 'auth/signupSuccess':
      return { ...state, signup: { ...state.signup, loading: false, success: true, errors: {} } };
    case 'auth/signupFailure':
      return { ...state, signup: { ...state.signup, loading: false, errors: action.payload } };
    case 'auth/clearSignupErrors':
      return { ...state, signup: { ...state.signup, errors: {} } };
    default:
      return state;
  }
};

第三步：表单组件实现 #

用React Redux的useSelector、useDispatch钩子替代connect，和React Hook Form的钩子风格统一，代码更简洁：

import * as React from "react";
import { useForm } from "react-hook-form";
import { ErrorMessage } from '@hookform/error-message';
import { useSelector, useDispatch } from "react-redux";

import { MainMenu } from "./../components/MainMenu";
import { userSignupAction } from '../actions/authenticateActions';

export default function Signup() {
  const dispatch = useDispatch();
  const { loading, errors: serverErrors, success } = useSelector(
    (state: RootState) => state.auth.signup
  );

  const {
    register,
    formState: { errors: formErrors },
    setError,
    handleSubmit,
    reset
  } = useForm<SignupFormInputs>({
    reValidateMode: 'onChange', // 输入变化时自动重校验、清除对应字段错误
    defaultValues: { userName: '', password: '', email: '', firstName: '', lastName: '' }
  });

  // 监听Redux中的服务端错误，统一同步到表单错误状态
  React.useEffect(() => {
    Object.entries(serverErrors).forEach(([field, messages]) => {
      if (messages?.length) {
        setError(field as keyof SignupFormInputs, {
          type: 'server',
          message: messages[0]
        });
      }
    });
  }, [serverErrors, setError]);

  // 注册成功后重置表单
  React.useEffect(() => {
    if (success) {
      reset();
      // 可添加跳转、成功提示逻辑
    }
  }, [success, reset]);

  const onSubmit = (data: SignupFormInputs) => {
    dispatch(userSignupAction(data));
  };

  return (
    <div>
      <MainMenu role="anonymous"/>
      <div className="center70">
        <h2>Signup</h2>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div>
            <label>Username</label>
            <input
              {...register("userName", { required: "Username is required"})}
              type="text"
              disabled={loading}
            />
            <ErrorMessage errors={formErrors} name="userName" />
          </div>
          <div>
            <label>First Name</label>
            <input {...register("firstName")} type="text" disabled={loading} />
          </div>
          <div>
            <label>Last Name</label>
            <input {...register("lastName")} type="text" disabled={loading} />
          </div>
          <div>
            <label>Email</label>
            <input
              {...register("email", {
                required: "Email is required",
                pattern: { value: /^\S+@\S+$/i, message: "Please enter a valid email" }
              })}
              type="email"
              disabled={loading}
            />
            <ErrorMessage errors={formErrors} name="email" />
          </div>
          <div>
            <label>Password</label>
            <input
              {...register("password", {
                required: "Password is required",
                minLength: { value: 6, message: "Password must be at least 6 characters" }
              })}
              type="password"
              disabled={loading}
            />
            <ErrorMessage errors={formErrors} name="password" />
          </div>
          <input type="submit" value={loading ? "Submitting..." : "Signup"} disabled={loading} />
        </form>
      </div>
    </div>
  );
}

• 从根本上避免无限重渲染：所有setError操作都放在useEffect中，仅在服务端错误变化时执行，不在渲染层做状态修改
• 符合单向数据流要求：所有Redux状态修改都走action，没有直接修改props的违规操作
• 无重复代码：服务端错误同步是通用逻辑，后续新增表单字段不需要额外写错误判断、清空逻辑
• 自动处理错误清除：提交时自动清空历史错误，用户输入时React Hook Form自动清除对应字段错误，不需要给每个输入框单独绑定事件
• 全链路TS类型覆盖：字段名、状态结构、接口参数都有类型检查，拼写错误会直接在编译阶段提示
• 新增了提交loading状态，避免重复提交问题

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