Redux Form Инициализировать форму из состояния - PullRequest
Новая
       9

Redux Form Инициализировать форму из состояния

0 голосов
/ 21 сентября 2018

Привет, я не могу обернуть голову вокруг инициализации редукционной формы.Моя форма имеет шаблоны.Когда пользователь выбирает шаблон, действие отправляется, и я сохраняю выбранный шаблон как activeTemplate в своем состоянии избыточности.Тогда я хотел бы каждый раз, когда это activeTemplate изменяется, чтобы повторно инициализировать форму.Мой код выглядит так: 

MainForm = connect(
  mapStateToProps,
  mapDispatchToProps
)(MainForm);

MainForm = reduxForm({
  form: 'main',
  // Here I would like to use the activeTemplate from redux store
  initialValues: {travelers: [{name: 'Lada'}, {name: 'Pepa'}]},
  enableReinitialize: true,
  destroyOnUnmount: false
})(MainForm);

function mapStateToProps(state) {
  return {
    formValues: state.form.main.values,
    formTemplates: state.templates.templates,
    activeTemplate: state.templates.activeTemplate,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ getTemplates, activateTemplate }, dispatch);
}

export default MainForm;

Я не уверен, как правильно передать activeTemplate в initialValues.У меня уже есть некоторые жестко закодированные initialValues при загрузке формы, потому что activeTemplate еще нет.Код может нуждаться в некотором рефакторинге, чтобы заставить это работать, потому что я не вижу, как заставить это работать в этом состоянии.Я ценю любую помощь! 

import { GET_TEMPLATES, ACTIVATE_TEMPLATE } from '../actions/types';

export default function(state = {}, action) {
  switch (action.type) {
    case GET_TEMPLATES:
      return {
        templates: action.payload
      }
    case ACTIVATE_TEMPLATE:
      return {
        ...state, activeTemplates: action.payload
      }
    default:
      return state;
  }
}

1 Ответ

0 голосов
/ 21 сентября 2018

Вы можете инициализировать activeTemplate из состояния при подключении к redux: 

import { getFormValues } from 'redux-form'

MainForm = connect(
    state => ({
      formValues: getFormValues('main')(state),
      initialValues: {activeTemplate: state.templates.activeTemplate}
    }),
    mapStateToProps,
    mapDispatchToProps
)(MainForm);

Вы также можете использовать селектор значений формы.Отметьте здесь

Reference1

...