Как сбросить (или уничтожить) избыточную форму только при изменении маршрута и продолжении переключения языка? - PullRequest
Новая
       24

Как сбросить (или уничтожить) избыточную форму только при изменении маршрута и продолжении переключения языка?

0 голосов
/ 05 апреля 2019

Я создаю формы регистрации / логина / забытого пароля, используя приставку.Также я использую response-intl для многоязычной поддержки.Изменение языка вызывает повторное рендеринг компонентов и сбрасывает формы.

Я хотел бы сбросить форму только при изменении местоположения, но мое решение кажется мне не идеальным

1), если я использую destroyOnUnmount: true случай следующий: когда пользователь начал заполнять, например, регистрационную форму, а затем решил сменить язык -> форма уничтожается при размонтировании и все поля сбрасываются.2) если destroyOnUnmount: false все в порядке, то при изменении языка данные формы не уничтожаются.Но если изменить маршрут и затем снова открыть форму регистрации - предыдущие данные все еще присутствуют.

initialValues ​​не установлены

Поэтому я решил установить destroyOnUnmount: false

Затем вКомпонент приложения я вызываю действие, если местоположение меняется 

  // reset redux forms on route change
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.props.resetFormsAction();
    }
  }

, а затем в саге слушаю действие 

export function* resetForms() {
  try {
    const forms = yield select(getForms);
    yield all(Object.keys(forms).map(form => put(reset(form))));
  } catch (e) {
    console.error(e);
  }
}

const commonSagas = [
  takeEvery(RESET_FORMS, resetForms),
];

export default commonSagas;

селектор 

export const getForms = (state: AppStore) => state.form;

Это решение работает нормально, ноесть какая-либо другая реализация для сброса / уничтожения формы только при изменении местоположения, но не при нажатии на кнопку изменения языка

Я нашел похожий вопрос , но он мне не помог

Ответы [ 2 ]

0 голосов
/ 08 апреля 2019

В результате я решил обработать уничтожение в componentWillUnmount и в саге.

Пример 

componentWillUnmount() {
    const { destroyFormRequestAction } = this.props;
    destroyFormRequestAction(FormTypes.registration, REGISTRATION_URL);
  }

, а затем прослушайте действие в моей саге и проверьте, изменился ли маршрут 

...
export function* destroyForm(action: DestroyFormAction) {
  try {
    const routerLocation = yield select(getLocation);
    if (routerLocation.pathname !== action.payload.currentPath) {
      yield put(destroy(action.payload.formType));
    }
  } catch (e) {
    console.error(e); // tslint:disable-line
  }
}

const formSagas = [
  takeEvery(DESTROY_FORM_REQUEST, destroyForm),
];
0 голосов
/ 05 апреля 2019

Вы можете сбросить форму в саге вместо вызова собственного действия в componentDidUpdate ()

  1. Установить destroyOnUnmount: false
  2. Вместо сброса вы можете использовать действие 'destroy' из redux-формы 
yield takeEvery('@@router/LOCATION_CHANGE', function* () {
      try {
        const forms = yield select(getForms);
        yield all(Object.keys(forms).map(form => put(destroy(form))));
      } catch (e) {
        console.error(e);
      }
    }
...