Redux-form get the value from other tab/component

Question

I have to implement a form with a bit less than 30 different fields. So I decided to split them in 2 differents container component with two tabs to navigate between them.

I use redux-form to handle the data binding.

For on component I can get the value from handleSubimit of one component. But the final validation must be in the last tab only. From here I only have access to the value of the second tab. Like the data from the store where wipe out.

How can I access the store where my previous data should be ?

TabNavigationBar.js

import React from 'react';
import TabNavigationItem from './TabNavigationItem';

const TabNavigationBar = ({ onTabChange, activeTab }) => {
  const tabList = [
    { hasIcon: 'fas fa-user-circle', hastext: 'Information Utilisateur' },
    { hasIcon: 'fas fa-file-alt', hastext: 'Informations contrat' }
  ];

  const clickOnTab = tabNumer => {
    onTabChange(tabNumer);
  };

  return (
    <div className="columns">
      <div className="column is-offset-one-quarter-desktop is-offset-one-thirds-tablet is-half-desktop is-one-thirds-tablet">
        <div className="tabs is-toggle is-fullwidth">
          <ul>
            {tabList.map((tab, i) => (
              <TabNavigationItem
                key={i}
                tabSelected={() => clickOnTab(i)}
                hasClass={activeTab === i ? 'is-active' : ''}
                hasIcon={tab.hasIcon}
                hasText={tab.hastext}
              />
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default TabNavigationBar;

UserForm.js

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

import CiviliteRadioButton from './CiviliteRadioButton';
import NameInputs from './NameInputs';
import AddressInputs from './AddressInputs';
import MailAndDOB from './MailAndDOB';
import TelephoneInputs from './TelephoneInputs';

let UserForm = ({ handleSubmit }) => {
  return (
    <div>
      <CiviliteRadioButton />
      <NameInputs />
      <AddressInputs />
      <MailAndDOB />
      <TelephoneInputs />
    </div>
  );
};

UserForm = reduxForm({
  form: 'form1',
  initialValues: {
    user: {
      adresse: {
        country: 'France'
      },
      civilite: 'Madame'
    }
  }
})(UserForm);

export default UserForm;

ContractForm.js

import React from 'react';
import { reduxForm } from 'redux-form';
import InputItem from '../InputItem';

import ContratInputsList from './contratInputList';

let ContratForm = ({ handleSubmit }) => {
  const submit = values => {
    console.log(values);
  };

  return (
    <div>
      <div className="columns is-multiline ">
        {ContratInputsList.map((item, i) => {
          return (
            <div className="column is-half" key={i}>
              <InputItem spec={item.spec} />
            </div>
          );
        })}
      </div>
      <div className="columns">
        <div className="column">
          <div className="field is-grouped is-grouped-right">
            <input
              className="button is-primary"
              onClick={handleSubmit(submit)}
              type="submit"
              value="Envoyer"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

ContratForm = reduxForm({
  form: 'form2'
})(ContratForm);

export default ContratForm;

EDIT

When I click on my tabs, redux-form/DESTROY is called and erase form1's data.

Answer 1

尝试在reduxForm（options） destroyOnUnmount标志设置为false 。