在redux Store中存储redux-form的脏属性

// formReducer.js

const initialState = {
  formData: {}, // 存储表单数据
  dirtyFields: [], // 存储脏属性字段
};

const formReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_FORM_DATA':
      return {
        ...state,
        formData: {
          ...state.formData,
          [action.payload.field]: action.payload.value,
        },
      };
    case 'SET_DIRTY_FIELDS':
      return {
        ...state,
        dirtyFields: action.payload.dirtyFields,
      };
    default:
      return state;
  }
};

export default formReducer;

import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';

const MyForm = ({ dirtyFields, handleSubmit }) => {
  const handleFieldChange = (field, value) => {
    // 更新表单字段值到redux Store
    dispatch({ type: 'UPDATE_FORM_DATA', payload: { field, value } });

    // 更新脏属性字段到redux Store
    const updatedDirtyFields = value ? [...dirtyFields, field] : dirtyFields.filter(f => f !== field);
    dispatch({ type: 'SET_DIRTY_FIELDS', payload: { dirtyFields: updatedDirtyFields } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <Field name="name" component="input" type="text" onChange={e => handleFieldChange('name', e.target.value)} />
      </div>
      {/* 其他表单字段 */}
      <button type="submit">Submit</button>
    </form>
  );
};

const mapStateToProps = state => ({
  dirtyFields: state.form.dirtyFields,
});

export default connect(mapStateToProps)(reduxForm({ form: 'myForm' })(MyForm));