Как легко удалить поля из формы Redux и магазина Redux - PullRequest
Новая
       20

Как легко удалить поля из формы Redux и магазина Redux

0 голосов
/ 18 июня 2019

Мой код использует условный рендеринг для удаления полей из DOM формы. Для избыточной формы значение удаленного поля останется в хранилище форм, и это действительно раздражает. У кого-нибудь есть хорошие идеи, как решить эту проблему? Ниже приведена моя реализация для условного рендеринга. Поскольку в моем проекте довольно часто используется условный рендеринг, как я могу решить проблему беспроблемно? 

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
});

Спасибо.

1 Ответ

0 голосов
/ 19 июня 2019

Я нашел способ решить эту проблему: 

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
  })
});
...