如何轻松地从 Redux 表单和 Redux 存储中删除字段答案

【问题标题】：How to easily remove fields from Redux form and Redux store如何轻松地从 Redux 表单和 Redux 存储中删除字段
【发布时间】：2019-06-17 23:29:33
【问题描述】：

我的代码使用条件渲染从表单 DOM 中删除字段。对于 redux 表单，删除的字段值会保留在表单存储中，这真的很烦人。任何人都有好主意如何解决这个问题？以下是我对条件渲染的实现。因为在我的项目中进行条件渲染是很常见的，我该如何轻松解决这个问题？

import React from "react";
import { connect } from "react-redux";
import { Field, getFormValues } from "redux-form";
import { Grid, Form } from "semantic-ui-react";
import RenderFieldSelect from "../../formElements/Select";

import {
  PROPERTY_TYPE_1,
  PROPERTY_TYPE_2,
  SUB_TYPE,
  EMPTY_OPTIONS
} from "./SelectOptions";
import { required } from "redux-form-validators";
import { withRouter } from "react-router";

class SummaryAttributes extends React.Component {
  render() {
    let propertyType; // property type
    let propertyTypes = EMPTY_OPTIONS; // propertyTypes options
    let hasSubType; 
    let subTypes = EMPTY_OPTIONS; 

    const { formValues } = this.props;

    if (formValues !== undefined) {
      const { scorecardType } = this.props.match.params;
      switch (scorecardType) {
        case "1":
          propertyTypes = PROPERTY_TYPE_1;
          break;
        case "2":
          propertyTypes = PROPERTY_TYPE_2;
          break;
        default:
      }

      propertyType = formValues.propertyType;
      switch (propertyType) {
        case "1":
          subTypes = SUB_TYPE;
          hasSubType = true;
          break;
        case "2":
          hasSubType = false;
          break;
        default:
          subTypes = SUB_TYPE;
          hasSubType = true;
      }
    }

    return (
      <div>
        <Grid>
          <Grid.Row columns="equal">
            <Grid.Column>
              <Form.Group widths="equal">
                <Field
                  name="propertyType"
                  component={RenderFieldSelect}
                  label="Property Type"
                  required="Y"
                  options={propertyTypes}
                  validate={[required()]}
                />
              </Form.Group>
            </Grid.Column>
            <Grid.Column>
              {hasSubType && (
                <Field
                  name="subType"
                  component={RenderFieldSelect}
                  label="Sub Type"
                  required="Y"
                  options={subTypes}
                  validate={[required()]}
                />
              )}
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  formValues: getFormValues("propertyForm")(state)
});

export default withRouter(
  connect(
    mapStateToProps,
    null
  )(SummaryAttributes)
);

减速器：Index.js

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import loadingReducer from './reducer_loading';

export default combineReducers({
  form: formReducer,
  loading: loadingReducer
});

谢谢。

【问题讨论】：

不应该太复杂。你能给我们看一些你的 redux 中的代码吗？
@acdcjunior。我已经更新了我的帖子。
@PLee - 请分享相关的 reducer，以便我们了解有关表单状态管理的更多信息。
@jank。我正在使用 redux-form 的 formReducer 来获取表单状态。谢谢。

标签： reactjs redux redux-form

【解决方案1】：

我找到了解决这个问题的方法：

import { combineReducers } from "redux";
import {
  reducer as formReducer,
  actionTypes as formActionTypes
} from "redux-form";

const removeUnregisteredFormFieldValue = (state, action) => {
  if (action.type !== formActionTypes.UNREGISTER_FIELD) return state;
  const {
    values: { [action.payload.name]: unregistered, ...values }
  } = state;
  return { ...state, values };
};

export default combineReducers({
  form: formReducer.plugin({
    sampleForm: removeUnregisteredFormFieldValue,
    propertyForm: removeUnregisteredFormFieldValue
  })
});

【讨论】：