使用React Redux Toolkit优雅处理多输入框——对象展开运算符

你当前的方案已经能正常运行，但确实可以通过Redux Toolkit的特性大幅简化状态更新逻辑，核心是利用Immer的不可变更新能力，避免逐个字段手动赋值。

优化Slice中的Reducer逻辑 #

你的firstStepData reducer目前需要逐个字段判断赋值，完全可以简化成一次性合并payload到表单状态：

const formSlice = createSlice({
    name: "form",
    initialState: {
        formData: {
            userName: '',
            userEmail: '',
            phoneNumber: '',
            planName: '',
            planDuration: '',
            planPrice: 0,
            priceMultiplier: 10,
            addons: null,
        }
    },
    reducers: {
        firstStepData(state, action) {
            // 直接将payload中的字段合并到formData，自动覆盖对应字段，其余字段保持不变
            Object.assign(state.formData, action.payload);
            // 也可以用对象展开运算符写法，效果一致：
            // state.formData = {...state.formData, ...action.payload};
        },
        // 其他reducer逻辑...
    }
});

为什么这样可行？ #

Redux Toolkit内置了Immer库，它允许我们在reducer中直接“修改”状态对象（实际是Immer在后台生成不可变的新状态），所以用Object.assign或展开运算符就能一次性完成状态更新，无需手动处理每个字段的默认值判断。

现有表单与处理函数无需大幅修改 #

你当前的表单代码和handlePersonalInfo处理函数可以直接保留，因为每次派发的payload结构{[e.target.name]: e.target.value}刚好能和优化后的reducer匹配：

const handlePersonalInfo = (e) => {
    dispatch(firstStepData({
        [e.target.name]: e.target.value  
    }))
};

这种写法的好处是，后续如果新增输入字段，只要保证输入框的name属性和formData中的字段名一致，无需修改任何reducer逻辑，直接复用现有代码即可，扩展性更强。

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