前端UI组件【免费下载链接】redux-formA Higher Order Component using react-redux to keep form state in a Redux store项目地址https://gitcode.com/gh_mirrors/re/redux-form点击查看免费下载redux-form是一个基于 React 与 Redux 的表单状态管理方案它通过高阶组件Higher-Order Component把 HTML 表单的全部状态——值、焦点、触碰状态、校验结果与提交状态——统一收进 Redux store 中统一管理。本文从项目 README 出发结合仓库源码src/index.js、src/createReducer.js、src/createReduxForm.js与官方入门指南docs/GettingStarted.md系统讲解 redux-form 的定位、安装、四步上手流程、数据流原理与进阶能力读完后你可以在自己的 React Redux 项目中完整落地基于 store 的表单并理解其底层 dispatch 与 reducer 的工作机制。项目定位表单状态也要“可订阅、可修改”redux-form的官方定位非常明确它配合 React Redux 工作让 React 中的 HTML 表单能够借助 Redux 来存储自身的全部状态。仓库根目录的 README.md 用一句话概括了它的核心机制这是一个 A Higher Order Component using react-redux to keep form state in a Redux store——即一个借助react-redux将表单状态保存在 Redux store 中的高阶组件库。围绕这一机制redux-form对外暴露了三个核心角色它们在 docs/GettingStarted.md 中被明确划分了职责组成部分类型职责formReducerReducer一个纯函数根据应用中派发的 Redux action 告诉 store 如何更新表单状态reduxForm()高阶组件接收配置对象并返回一个新函数用来包装你的表单组件把用户交互绑定到 Redux action 的派发上Field/组件生活在被包装的表单组件内部负责把各个输入组件与redux-form逻辑连接起来三者分工清晰formReducer负责“状态怎么变”reduxForm()负责“把组件和 store 绑起来”Field/负责“每个输入框怎么同步”。理解了这三者的关系也就理解了整个库的设计骨架。安装与版本前提README 给出的安装方式非常简单npm install --save redux-form从仓库根目录的 package.json 可以看到当前版本为8.3.10其 peerDependencies 声明的兼容范围是react^16.4.2 || ^17.0.0 || ^18.0.0、react-redux^6.0.1 || ^7.0.0 || ^8.0.0、redux^3.7.2 || ^4.0.0其中immutable^3.8.2 || ^4.0.0为可选依赖仅在需要使用 Immutable.js 结构时才需要安装。安装前请确认你的 React / Redux 版本落在上述区间内。官方提示新项目是否应该使用 redux-formREADME 中有一段醒目的 “⚠️ ATTENTION ⚠️” 说明如果你正处于项目起步阶段社区的主流共识是不要把表单状态放进 Redux。redux-form 作者在维护过程中总结了表单场景的经验另行构建了 React Final Form并明确建议新项目优先考虑它因为Field的组件 API 与 redux-form 高度相似迁移成本很低。作者认为使用 redux-form 的唯一充分理由是你确实需要把表单数据与 Redux 进行非常紧密的耦合——例如需要在距离表单组件很远的地方比如另一个路由订阅并修改这些表单数据。如果你的应用没有这种“远距离读写表单状态”的需求应当避免引入 redux-form。这段提示是选择技术方案时的重要参考也是理解 redux-form 适用边界的核心信息它是一个能力强大但定位明确的工具适合表单状态全局共享的场景而非所有表单场景的默认答案。四步上手从 store 到可提交的表单docs/GettingStarted.md 给出了一条完整的四步上手路径下面结合源码逐段展开。第 1 步把formReducer挂进 storeredux-form要求 store 必须知道如何处理来自表单组件的 action。做法是把formReducer通过combineReducers挂到根 reducer 上并且必须挂在名为form的 key 下import { createStore, combineReducers } from redux import { reducer as formReducer } from redux-form const rootReducer combineReducers({ // ...your other reducers here // you have to pass formReducer under form key, // for custom keys look up the docs for getFormState form: formReducer }) const store createStore(rootReducer)formReducer服务于所有表单组件整个应用只需挂载一次。若确实需要自定义挂载 key比如使用redux-immutable时则需要配合reduxForm()的getFormState配置项其默认实现是state getIn(state, form)见 src/createReduxForm.js即从根 state 的form字段读取表单状态。从源码看src/reducer.js 只是createReducer(plain)的一行封装真正的主体是 src/createReducer.js。这个 createReducer 通过byForm包装实现按表单名分发每个 action 的meta.form决定了它作用于哪个表单切片只有当 action 类型以redux-form/前缀开头src/actionTypes.js 中定义prefix redux-form/且带有meta.form时才会被处理因此它不会干扰你的业务 reducer。第 2 步用reduxForm()包装表单组件要让表单组件与 store 通信需要用reduxForm()包装它。包装后会向组件注入关于表单状态的 props以及处理提交流程的函数import React from react import { Field, reduxForm } from redux-form let ContactForm props { const { handleSubmit } props return form onSubmit{handleSubmit}{/* form body*/}/form } ContactForm reduxForm({ // a unique name for the form form: contact })(ContactForm) export default ContactFormform配置项是必填的它必须是唯一的名字用于在 store 中隔离不同表单的状态。如果()()双括号语法看起来费解可以拆成两步// 第一步创建“已配置”的函数 createReduxForm reduxForm({ form: contact }) // 第二步用它包装 ContactForm 组件 ContactForm createReduxForm(ContactForm)从实现上看reduxForm在 src/reduxForm.js 中同样是createReduxForm(plain)的封装。在 src/createReduxForm.js 里可以看到一套默认配置值得逐一了解其含义配置项默认值作用touchOnBlurtrue失焦时把字段标记为 touchedtouchOnChangefalse值变化时把字段标记为 touchedpersistentSubmitErrorsfalse为true时值变化后仍保留 submit 错误不自动清除destroyOnUnmounttrue组件卸载时销毁表单状态enableReinitializefalseinitialValues变化时是否重新初始化表单keepDirtyOnReinitializefalse重新初始化时是否保留脏字段的用户输入updateUnregisteredFieldsfalse重新初始化时是否更新未注册字段getFormStatestate getIn(state, form)从根 state 定位表单状态切片的函数puretrue是否启用 shouldComponentUpdate 深度比较优化forceUnregisterOnUnmountfalse为true时即使destroyOnUnmount为假也强制注销字段submitAsSideEffectfalse提交返回值作为 action 派发而非等待 Promise 结果shouldAsyncValidate/shouldValidate/shouldError/shouldWarn各默认实现控制异步/同步校验触发时机的判定函数包装完成后被包装组件会收到一整套注入 props包括handleSubmit、values、pristine、dirty、valid、invalid、submitting、submitFailed、submitSucceeded、initialValues、initialize、reset、destroy、touch、untouch、blur、change、error、warning、asyncValidating等具体可见 src/createReduxForm.js 中构建reduxFormProps的代码这些 props 构成了你与表单状态交互的全部接口。第 3 步用Field/连接每个输入Field/组件把每个输入控件连接到 store。基础用法Field nameinputName componentinput typetext /这会创建一个typetext的 HTMLinput/元素同时自动传入value、onChange、onBlur等额外 props用于在底层追踪和维护该输入的状态。Field/远不止支持原生 inputcomponent还可以是类组件或函数式无状态组件name支持点号profile.name与数组下标phones[0].number形式来表示嵌套字段。完整的用法见 docs/api/Field.md。把三个输入接上一个完整的联系表单就成型了import React from react import { Field, reduxForm } from redux-form let ContactForm props { const { handleSubmit } props return ( form onSubmit{handleSubmit} div label htmlForfirstNameFirst Name/label Field namefirstName componentinput typetext / /div div label htmlForlastNameLast Name/label Field namelastName componentinput typetext / /div div label htmlForemailEmail/label Field nameemail componentinput typeemail / /div button typesubmitSubmit/button /form ) } ContactForm reduxForm({ // a unique name for the form form: contact })(ContactForm) export default ContactForm从此刻起store 就会根据表单组件派发的 action 被填充数据。字段的注册与注销由reduxForm内部通过REGISTER_FIELD/UNREGISTER_FIELDaction 完成见 src/createReducer.js 的REGISTER_FIELD分支每个字段会记录count计数以支持同名多实例卸载组件时若destroyOnUnmount为真状态会被清理。第 4 步响应提交提交时表单数据会以 JSON 对象的形式传给onSubmit函数import React from react import ContactForm from ./ContactForm class ContactPage extends React.Component { submit values { // print the form values to the console console.log(values) } render() { return ContactForm onSubmit{this.submit} / } }提交流程的底层逻辑在 src/handleSubmit.js 中先对全部字段执行touch(...fields)所以校验错误在提交后立即显示然后做异步校验再进入executeSubmit。executeSubmit会调用submit(values, dispatch, props)并根据返回结果是 Promise 还是普通值走不同分支Promise 成功则派发STOP_SUBMIT与SET_SUBMIT_SUCCEEDED失败或抛错则派发STOP_SUBMIT、SET_SUBMIT_FAILED并触发可选的onSubmitFail回调如果onSubmit同步抛出SubmissionErrorsrc/SubmissionError.js其errors会被解析并写入表单的 submit errors而不会把异常直接抛给用户界面。数据流一次交互如何走完整个 storedocs/GettingStarted.md 用下图概括了 redux-form 的简化数据流它同时也是 README 所描述的表单状态存入 Redux机制的具体化以一个被reduxForm()包装、内部含一个Field/文本输入的表单为例数据流如下用户点击输入框派发 Focus action即FOCUS类型为redux-form/FOCUSformReducer更新对应的 state 切片更新后的 state 再被传回输入组件。其他任何交互——填写输入、改变状态、提交表单——都遵循同样的闭环。FOCUS分支在 src/createReducer.js 中的实现可见一斑它会把上一个激活字段的active标记清除、记录新字段的visited与active、并在表单根节点写下active字段名。同理CHANGE分支src/createReducer.js会写入或删除values.${field}、清空该字段的asyncErrors与默认情况下的submitErrors并在touch为真时标记touched与anyTouched。在大多数场景下你不需要手动派发 actionreduxForm()已经把 action creators 绑定到 dispatch 上并注入为 propssrc/createReduxForm.js 中通过bindActionCreators完成绑定Field/内部也会自动调用注入的blur、change、focus。全部 34 个 action 类型数组操作、校验、提交生命周期等统一定义在 src/actionTypes.js 中并全部从 src/index.js 导出包括change、blur、focus、initialize、reset、destroy、touch、untouch、arrayPush、arrayRemove、setSubmitFailed、stopSubmit等。进阶能力与文档导航README 将完整的 API 与 FAQ 文档汇总如下仓库内的对应文件为入门指南 Getting Started本文四步上手的完整出处API 文档包含reduxForm()的全部配置项docs/api/ReduxForm.md、Field/docs/api/Field.md、FieldArray/docs/api/FieldArray.md、Fields/docs/api/Fields.md、Form/docs/api/Form.md、FormSection/docs/api/FormSection.md、action creatorsdocs/api/ActionCreators.md与 Reducer 插件机制docs/api/ReducerPlugin.mdFAQ覆盖提交函数没被调用自定义输入组件handleSubmit与onSubmit的区别提交后如何清空表单React Native 与 Immutable.js 兼容性如何减小打包体积等 11 个高频问题版本历史与迁移、MigrationGuide.md。常见进阶方向官方都给出了明确答案表单校验validate同步校验表单级与warn警告两个配置项在 src/createReduxForm.js 中被合并执行字段级校验通过在Field上配置validate/warnprops 实现generateValidator会把所有字段级校验合并为一个校验函数动态表单 / 字段数组FieldArray/配合arrayprops 中的push、pop、remove、swap、insert等 10 个数组操作方法对应 src/createReducer.js 中 10 个数组 action 分支它们会同步维护values、fields、syncErrors、syncWarnings、submitErrors、asyncErrors六个切片的一致性创建可增删的动态字段列表Immutable.js仓库提供immutable入口immutable.js 指向构建产物lib/immutable源码中对应 src/immutable 目录所有 reducer、Field、reduxForm均基于 Immutable 结构重新导出数据操作走 src/structure/immutable 的getIn/setIn/splice实现从 state 初始化 / 选择表单值initialValues配置项配合enableReinitialize、keepDirtyOnReinitialize控制初始化行为src/createReducer.js 中INITIALIZE分支对 keepDirty、keepValues 等语义有详细实现与注释formValueSelector与getFormValues等选择器从 src/selectors 目录导出用于在表单之外读取 store 中的表单状态——这正是 README 所说在远离表单组件的地方订阅并修改表单数据场景的落点。从源码看整体架构从 src/index.js 的导出清单可以完整看到这个库的公共 API 面reduxForm、reducer、Field、FieldArray、Fields、Form、FormSection、FormName、SubmissionError、formValueSelector、formValues、values、propTypes、34 个 action creators 以及isDirty/isValid/isPristine等 15 个状态选择器。在实现层面redux-form 通过**结构抽象structure**同时支持 plain 对象与 Immutable所有底层读写getIn/setIn/deleteIn/deepEqual/splice都定义在 src/structure/plain 与 src/structure/immutable 中createReducer、createReduxForm、createField都接收 structure 参数src/reducer.js、src/reduxForm.js、src/Field.js 分别以plain调用因此同一套逻辑可以无差别地运行在两种数据结构上。总结redux-form用一个 reducer 一个高阶组件 一个 Field 组件三个构件把 HTML 表单的全部状态收编进 Redux store并借助redux-form/前缀的 34 种 action 与按表单名分发的 reducer 机制实现了输入、焦点、校验、提交的完整状态闭环。它的核心价值在于表单状态可被全局订阅与修改当你的应用确实需要跨路由、跨组件紧密操作表单数据时它是一套经过充分验证的方案反之README 的官方建议是优先考虑 React Final Form 等更轻量的替代方案。上手时只需记住四步挂formReducer→ 用reduxForm()包装 → 用Field/连接输入 → 用onSubmit接收数据然后即可按需深入到校验、字段数组、Immutable 与选择器等进阶能力中。赞分享前端UI组件【免费下载链接】redux-formA Higher Order Component using react-redux to keep form state in a Redux store项目地址https://gitcode.com/gh_mirrors/re/redux-form点击查看免费下载相关推荐redux-form 入门指南用 formReducer、reduxForm() 与 Field 把表单状态接入 Redux Storeredux form 入门指南用 formReducer、reduxForm 与 Field 把表单状态接入 Redux Store 本指南是 redux f前端UI组件pm-skills 多视角头脑风暴命令 /brainstorm 完全指南为现有与新产品系统化生成创意与实验设计pm skills 多视角头脑风暴命令 /brainstorm 完全指南为现有与新产品系统化生成创意与实验设计 /brainstorm 是 pm skills前端UI组件redux-form reducer 完全指南在 Redux Store 中挂载与扩展表单状态redux form reducer 完全指南在 Redux Store 中挂载与扩展表单状态 redux form 是一个通过 react redux 将表前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考