使用React Redux更新对象的最优方案 及类似Vue v-model的替代实现方式

你的reducer中存在一个明显的低级错误，会直接导致表单更新不生效，需要优先修改：

const UPDATE_POST_FORM = (state, payload) => {
    return {
        ...state,
        // 原代码错误更新了companyForm，改为实际需要操作的postForm
        postForm: {...state.postForm, ...payload},
    };
};

同时建议将INITIAL_STATE中的postForm初始值从null改为{}，避免首次取值时解构报错。

你现在的基础逻辑完全符合Redux不可变更新的规范，不属于错误实现，但确实存在冗余的样板代码，可以进一步优化到接近Vue v-model的简洁度。

1. 轻量封装（无需修改现有Redux逻辑） #

在组件内封装一个通用的绑定生成函数，即可消除每个input的重复代码：

// 组件内新增方法
const bindInput = (property) => ({
  value: postForm[property] || '',
  onChange: (e) => handleProperty(property, e.target.value)
})

之后input直接调用即可，和v-model的使用体验几乎一致：

<input {...bindInput('title')} />
<input {...bindInput('date')} />
<input {...bindInput('description')} />

如果需要适配checkbox、select等控件，只要给bindInput加个类型参数，对应调整取值逻辑（比如checkbox取e.target.checked）即可。

2. 官方标准优化方案（Redux Toolkit） #

现在Redux官方已经全面推荐使用Redux Toolkit作为标准开发方式，内置Immer支持直接修改状态，还能消除冗余的action type、switch case代码，进一步简化逻辑：

第一步：用createSlice重写reducer #

import { createSlice } from '@reduxjs/toolkit'

const postSlice = createSlice({
  name: 'post',
  initialState: {
    postForm: {}
  },
  reducers: {
    updatePostForm: (state, action) => {
      // 内置Immer，无需手动解构，直接修改即可生成不可变更新
      Object.assign(state.postForm, action.payload)
    }
  }
})

export const { updatePostForm } = postSlice.actions
export default postSlice.reducer

第二步：封装自定义钩子复用绑定逻辑 #

可以把表单绑定逻辑封装成自定义hook，全局复用：

import { useDispatch, useSelector } from 'react-redux'
import { updatePostForm } from './postSlice'

const usePostFormModel = () => {
  const dispatch = useDispatch()
  const postForm = useSelector(state => state.post.postForm)
  const bind = (property) => ({
    value: postForm[property] || '',
    onChange: e => dispatch(updatePostForm({[property]: e.target.value}))
  })
  return { postForm, bind }
}

组件内直接调用即可：

const MyForm = () => {
  const { bind } = usePostFormModel()
  return (
    <>
      <input {...bind('title')} />
      <input {...bind('date')} />
      <textarea {...bind('description')} />
    </>
  )
}

• 修复bug后的原有实现是符合Redux规范的可用方案，适合小型项目快速开发
• 中大型项目优先选择Redux Toolkit + 自定义hook的方案，简洁度和Vue v-model基本持平，同时符合React单向数据流的设计理念，不会引入额外的心智负担，是目前的社区最优实践。
• 不建议为了完全模拟v-model引入第三方双向绑定库，上述原生封装方案已经足够满足需求。

内容的提问来源于stack exchange，提问作者Jérémie Chazelle