Question

嗨，我无法为初始化Redux表格而烦恼。我的表格有模板。当用户选择模板时，将分派该动作，并且在我的redux状态下，将所选模板另存为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;
  }
}

Answer 1

您可以在连接到Redux时从状态初始化activeTemplate：

import { getFormValues } from 'redux-form'

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

您也可以使用表单值选择器。选中here

Reference1

Redux表单从状态初始化表单

1 个答案: