Передача значения по умолчанию в Redux Form

  1. Чтобы передать значения по умолчанию в Redux Form мы в ProfileInfo, где рисуется наша формочка ProfileDataForm (не внутри самой формочки!), передаем в пропсах в нее наш объект profile из сервера, как initialValues:
    {editMode
              ? <ProfileDataForm initialValues={profile} profile={profile} onSubmit={onSubmit} />
              : <ProfileData goToEditMode={() => { setEditMode(true) }} profile={profile} isOwner={isOwner} />}

    И так как структура profile совпадает со структурой, которая у нас в ProfileDataForm раскинута по неймам, совпадают, то теперь в инпуты сразу приходят данные из сервера в качестве значений по умолчанию.

    Но если бы структура не совпадала, т.е. name поля формы не называлось бы  profile, тогда initialValues должен бы был быть вот такого формата:

    <CheckReduxForm onSubmit={onSubmit} initialValues={{name: numberCar}} />

    где number – это name поля формы (input или textarea), для которого присваивается значение по умолчанию.

  2. Чтобы форма каждый раз повторно инициализировалась (это нужно, если значение по умолчанию берется из стейта через конект), необходимо в месте оборачивания компоненты с формой при помощи Redux Form, помимо названия формы, обязательно добавить еще свойство enableReinitialize со значением true:
    const CheckReduxForm = reduxForm({ 
        form: 'check', //название формы
        enableReinitialize: true //вызов повторной инициализации
     })(CheckForm);

Альтернативным вариантом первому пункту один из блогеров в своей статье предлагает законектить саму форму к стейту и предавать в пропсы initialValues без опрокидывания компонент более высокого уровня:

const mapStateToProps = (state) => ({
  initialValues: state.initialName, // retrieve name from redux store 
})

Хотя там он говорит о необходимости переделки компоненты в классовую, но может и с функциональной сработает. Возможно, придется деструктуризировать initialValues в пропсах.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *