终极Redux-Form选择器指南：如何用formValueSelector高效获取表单状态

终极Redux-Form选择器指南：如何用formValueSelector高效获取表单状态

【免费下载链接】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将表单状态存储在Redux store中的高阶组件，而formValueSelector是其核心API之一，专门用于轻松连接表单值，让开发者能够高效获取和管理Redux store中的表单状态数据。

Redux-Form工作原理概述

Redux-Form的工作流程涉及多个关键部分，包括Action Creators、Dispatcher、formReducer、Redux Store以及Field Component等，它们相互协作以实现表单状态的管理。

从上图可以清晰看到，用户在Input组件上的操作（如onBlur、onChange）会触发相应的事件，这些事件会通过Field Component传递，进而影响Redux Store中的状态。而formValueSelector在这个流程中扮演着重要的角色，帮助我们从Store中精准地提取所需的表单值。

formValueSelector基本介绍

formValueSelector是一个“选择器”API，它的主要作用是创建一个选择器函数，该函数接受字段名称并返回指定表单的对应值，从而简化了连接到表单值的过程。

导入方式

在项目中使用formValueSelector，首先需要进行导入。对于ES5环境，可以使用以下方式：

var formValueSelector = require('redux-form').formValueSelector

对于ES6及以上环境，则可以这样导入：

import { formValueSelector } from 'redux-form'

参数说明

formValueSelector有两个参数，其中form是必填参数，getFormState是可选参数。

• form（String类型，必填）：要连接的表单名称，必须与传递给reduxForm()的form配置值相同。这是确保能够准确找到对应表单状态的关键。

• getFormState（Function类型，可选）：如果使用getFormState()配置参数将redux-form reducer存储在Redux store中除state.form之外的位置，那么必须在此处提供相同的函数来获取redux-form reducer所在的Redux store切片。默认值为state => state.form。

formValueSelector的selector函数

从formValueSelector()返回的函数具有特定的结构：selector(state:Object, ...field:String)。

参数详解

• state（Object类型，必填）：传递给mapStateToProps的全局Redux状态，这是获取表单状态的基础。

• ...field（String类型，必填）：要选择的一个或多个字段。如果只提供一个字段名称，函数将返回该字段的值；如果提供多个字段名称，将返回一个将字段映射到值的对象。如果字段是“深层的”（即名称中包含一个或多个.），返回的结构也将是深层的。例如，如果字段是'a.b'和'a.c'，则结果结构将是{a: { b: 'bValue', c: 'cValue' }}。

formValueSelector的使用方法

使用formValueSelector通常分为两步，首先为表单名称创建一个选择器，然后通过不同方式使用该选择器。

创建选择器

首先创建一个针对特定表单名称的选择器，例如：

const selector = formValueSelector('myFormName')

具体使用方式

1. 单独选择字段

可以在connect函数中，通过selector分别获取各个字段的值，并将其映射为组件的props。

connect(state => ({ firstValue: selector(state, 'first'), secondValue: selector(state, 'second') }))(MyFormComponent)

2. 将多个字段作为一组选择到一个分组prop中

如果需要同时获取多个字段的值，并将它们组合成一个对象，可以像下面这样操作：

connect(state => ({ myValues: selector(state, 'first', 'second') }))(MyFormComponent)

3. 将选择器用作mapStateToProps

当不需要从状态中获取其他props，且正在选择多个字段时，选择器本身可以直接作为mapStateToProps使用。

connect(state => selector(state, 'first', 'second'))(MyFormComponent)

总结

formValueSelector是Redux-Form中用于高效获取表单状态的强大工具，通过本文的介绍，相信你已经对它的基本概念、参数、selector函数以及使用方法有了全面的了解。合理运用formValueSelector，能够让你在开发中更轻松地管理和获取Redux store中的表单数据，提升开发效率。更多详细内容可以参考项目中的docs/api/FormValueSelector.md文档。

【免费下载链接】redux-formA Higher Order Component using react-redux to keep form state in a Redux store项目地址: https://gitcode.com/gh_mirrors/re/redux-form