Redux新手求助：Redux-Form表单字段变更触发Action的方法

嘿，作为Redux和redux-form的新手，碰到字段变更要触发自定义Action的问题太正常啦！我来给你拆解一下怎么实现，保证你能快速上手～

核心思路 #

redux-form本身会处理表单字段的状态更新，但如果我们需要在字段变更时额外触发自己的业务Action，只需要自定义字段的onChange处理函数：先让redux-form完成默认的状态更新，再调用dispatch触发你的Action。

具体步骤 #

1. 准备你的自定义Action

首先，先定义一个你想在字段变更时触发的Action（也可以根据不同字段定义多个Action）：

// actions.js
export const fieldChanged = (fieldName, value) => ({
  type: 'FIELD_CHANGED',
  payload: { fieldName, value }
});

2. 改造表单组件和字段渲染函数

你需要把表单组件用connect和Redux store连接，这样才能拿到dispatch方法；然后修改renderField函数，自定义onChange逻辑：

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux' // 引入connect
import { fieldChanged } from './actions' // 引入你的Action
import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';

// 改造renderField，加入dispatch和自定义onChange
const renderField = ({ input, label, name, type, meta, dispatch }) => {
  const handleChange = (e) => {
    // 第一步：让redux-form处理字段的默认更新，保证表单状态正常
    input.onChange(e);
    // 第二步：触发你的自定义Action
    dispatch(fieldChanged(name, e.target.value));
  };

  return (
    <FormGroup row>
      <Label for={name} sm={2}>{label}</Label>
      <Col sm={10}>
        <Input
          {...input}
          type={type}
          name={name}
          id={name}
          onChange={handleChange} // 替换redux-form默认的onChange
        />
        {/* 保留redux-form的校验提示 */}
        {meta.touched && meta.error && <FormText color="danger">{meta.error}</FormText>}
      </Col>
    </FormGroup>
  );
};

// 表单组件本身不变
let MyForm = (props) => {
  const { handleSubmit } = props;
  return (
    <Form onSubmit={handleSubmit}>
      <Field name="username" label="用户名" type="text" component={renderField} />
      <Field name="email" label="邮箱" type="email" component={renderField} />
      <FormGroup row>
        <Col sm={{ size: 10, offset: 2 }}>
          <Button type="submit">提交</Button>
        </Col>
      </FormGroup>
    </Form>
  );
};

// 用reduxForm包装表单，指定唯一表单标识
MyForm = reduxForm({
  form: 'myForm'
})(MyForm);

// 用connect连接Redux，让组件能拿到dispatch
export default connect()(MyForm);

3. （可选）针对不同字段做差异化处理

如果不同字段需要触发不同的Action，只需要在handleChange里根据字段名判断即可：

const handleChange = (e) => {
  input.onChange(e);
  const value = e.target.value;
  switch(name) {
    case 'username':
      dispatch(usernameUpdated(value)); // 针对用户名的Action
      break;
    case 'email':
      dispatch(emailUpdated(value)); // 针对邮箱的Action
      break;
    default:
      dispatch(fieldChanged(name, value));
  }
};

4. 在Reducer中处理你的Action

别忘了在Reducer中处理自定义Action的类型，更新对应的状态：

// reducers.js
const initialState = {};

export const formActionsReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'FIELD_CHANGED':
      return {
        ...state,
        [action.payload.fieldName]: action.payload.value
      };
    // 其他Action处理...
    default:
      return state;
  }
};

关键注意点 #

• 一定要先调用input.onChange(e)，否则redux-form的表单状态不会更新，会导致表单数据不同步！
• 必须用connect()把组件和Redux连接，这样才能拿到dispatch方法，renderField作为Field的组件会自动继承这个dispatch props。

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