React项目使用redux-form@8.3.7时表单值被覆盖、无法正常采集输入值的问题

这个问题是redux-form的reducer挂载配置不符合版本内置约定导致的状态读取错位。

• redux-form 8.3.7版本硬编码了内置formReducer的store挂载路径：该reducer必须挂载在Redux store顶层的form字段下，不支持自定义键名。
• 当前的combineReducers配置把formReducer挂在了formReducer键名下，redux-form内部逻辑完全读取不到自己维护的状态切片，触发输入动作时没法走正常的不可变状态合并流程，就会出现输入值直接覆盖全局状态、DevTools里状态结构错乱的现象。

1. 调整Reducer挂载配置 #

把combineReducers里formReducer的键名从formReducer替换为form，修改后的代码：

import { combineReducers } from "redux";
import { reducer as formReducer } from 'redux-form'
import ocaFormFieldReducer from "./ocaFormReducers/ocaFormFieldReducer";
import stepperActiveStepReducer from "./ocaFormReducers/stepperActiveStepReducer";
import groupFieldReducer from "./ocaFormReducers/groupFieldReducer";

const reducer = combineReducers({
    ocaFormFieldReducer,
    stepperActiveStepReducer,
    groupFieldReducer,
    // 必须使用form作为挂载键名，无法通过配置修改
    form: formReducer
});

export default reducer;

调整完成后打开Redux DevTools检查：

• 顶层store结构中存在form字段，展开后能看到ocaFormData对应的表单状态节点，节点内包含values、registeredFields等redux-form默认维护的字段
• 输入表单内容时，动作对应的状态更新路径是form.ocaFormData.values.SUrya，而非全局无归属的顶层路径

2. 校验高阶组件嵌套顺序 #

redux-form的reduxForm()高阶组件必须处于react-redux的connect()组件外层，两者的嵌套顺序直接决定状态注入的正确性：

• 错误顺序：connect()(reduxForm()(业务组件)) —— connect会拦截redux-form需要的状态props，导致表单组件读取不到正确的输入值
• 正确顺序：reduxForm()(connect()(业务组件))，也就是你当前代码里的嵌套顺序，本身是符合要求的，不需要调整

• 检查项目里的全局自定义reducer，看是不是在写动作匹配逻辑时范围写宽了，不小心把@@redux-form/开头的动作也接入了，直接截断了表单的正常更新流程
• 跑下npm ls redux-form react-redux核对依赖树，避免出现多个版本的redux-form或者react-redux共存的情况，版本错位也会导致状态上下文读取错误
• 确认传给reduxForm()配置的form名称是稳定值，不要把动态生成的随机字符串、未固定的路由参数作为表单名，避免每次渲染都创建全新的空表单状态，表现出来就是输入值被异常覆盖

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