redux - 使用 react、redux 和 redux-form 对字段进行内联编辑。我应该这样做吗?

标签 redux redux-form

我不想为整个可编辑对象打开一个表单,而是想从该对象创建单个字段的内联编辑。

我正在为我的其他表单使用 reactjs、redux 和 redux-form,所以我认为最好的起点是也尝试使用 redux-form 进行内联编辑。这将使我免于使用两种不同的方式来进行验证、状态管理等。

但这意味着我会为每个可编辑对象创建一个表单,并为这些对象的每个字段创建一个表单。它可能有数百种形式。除了这种方法会带来的可维护性问题之外,我想知道性能影响是什么。在这种情况下,redux-form 会如何表现?这是否意味着将有数百个 reducer 监听 redux 存储中的每个操作,或者这些 reducer 是否仅在显示包含表单的页面时监听?

最佳答案

更新

我认为应该很有可能在编辑时为内联字段创建一个 redux-form,并在编辑停止时删除。

这是一个工作示例(打开开发工具以查看正在运行的操作) https://codesandbox.io/s/13nywm3k2j

表单提交后显然需要一些数据持久化机制


表单数据不一定应该是“扁平”的,它可以借助点符号嵌套,比如

<Form>
  <Field name='title' />
  <Field name='object.title' />
  <Field name='object.mass' />
  <Field name='object.weight' />
</Form>

关于redux - 使用 react、redux 和 redux-form 对字段进行内联编辑。我应该这样做吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48085803/

相关文章:

reactjs - redux-form 字段值可以保存对象而不仅仅是字符串吗?

reactjs - Redux 连接不接受 reduxForm 返回的对象

Angular 2 redux 和 immutable.js 状态

javascript - 在 React 项目中添加 Redux

javascript - react-router 1.0 : using this. props.children 而不是 RouteHandler

redux-form:排序 connect 和 reduxForm 调用 - 不能一起访问 store props 和 syncErrors

reactjs - 如何在创建 react 应用程序中添加谷歌验证码?

Redux 表单字段组件和验证

javascript - "dispatch"未捕获类型错误 React-Redux

reactjs - 如何在react类表单组件中检索当前的redux-form状态字段值?