redux-form：组件卸载unregisterField后如何自动删除store中的值

这个问题确实是redux-form的一个常见小痛点——默认情况下unregisterField action只会移除字段的注册信息，但不会自动清理store里对应的字段值。不过不用手动调用action也能搞定，给你两个实用的方案：

方案一：自定义带清理逻辑的Field组件（适合个别字段） #

如果只是部分字段需要这个卸载清理的行为，可以封装一个自定义的Field组件，利用React的生命周期钩子（函数组件用useEffect）在组件卸载时自动清空对应值：

import React, { useEffect } from 'react';
import { Field, useDispatch, useFormState } from 'redux-form';

// 自定义Field，卸载时自动清空对应字段值
const CleanupField = ({ name, component, ...restProps }) => {
  const dispatch = useDispatch();
  // 获取当前表单的名称
  const currentFormName = useFormState().form;

  // 组件卸载时执行清理
  useEffect(() => {
    return () => {
      // 触发redux-form的CHANGE action，将字段值设为undefined
      dispatch({
        type: '@@redux-form/CHANGE',
        payload: undefined,
        meta: { form: currentFormName, field: name }
      });
    };
  }, [dispatch, currentFormName, name]);

  return <Field name={name} component={component} {...restProps} />;
};

使用的时候直接用CleanupField代替原生的Field就行，比如：

<CleanupField name="username" component={Input} />

当这个组件卸载时，会自动把username字段的值从store中移除（redux-form会自动过滤值为undefined的字段）。

方案二：Redux中间件（全局生效） #

如果你的项目里大部分表单都需要这个行为，写一个Redux中间件会更高效，全局监听UNREGISTER_FIELD action，自动触发值的清理：

// 定义清理卸载字段的中间件
const cleanupUnregisteredFieldMiddleware = store => next => action => {
  // 监听字段注销的action
  if (action.type === '@@redux-form/UNREGISTER_FIELD') {
    const { meta: { form, field } } = action;
    // 自动触发CHANGE action清空对应字段值
    next({
      type: '@@redux-form/CHANGE',
      payload: undefined,
      meta: { form, field }
    });
  }
  // 继续执行原action
  return next(action);
};

然后把这个中间件加入你的Redux store配置中：

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(cleanupUnregisteredFieldMiddleware)
);

这样一来，任何字段触发unregisterField时，都会自动清空对应的值，不需要修改任何组件代码。

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