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

Мой код использует условный рендеринг для удаления полей из формы 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
});

Спасибо.

Не должно быть слишком сложно. Можете ли вы показать нам код из вашего редукса?

acdcjunior 18.06.2019 01:39

@acdcjunior. Я обновил свой пост.

PLee 18.06.2019 01:56

@PLee - Пожалуйста, поделитесь соответствующим редуктором, чтобы мы могли получить больше информации об управлении состоянием вашей формы.

Tomer 18.06.2019 10:15

@джанк. Я использую formReducer из избыточной формы, чтобы получить статус формы. Спасибо.

PLee 18.06.2019 17:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
410
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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
  })
});

Другие вопросы по теме