带有redux-form

Question

我有一个使用redux-form创建的表单组件。

我使用reduxForm() HOC将表单组件连接到redux-form redux商店。

作为其中的一部分，我必须为表单提供一个名称，该表单用作redux-form存储表单数据的ID。

export const ContactAddEditForm = ReduxForm.reduxForm<FormData, Props>({
    form: "contactAddEdit"
})(ContactAddEdit);

在上面的示例中，我使用名称＆＃34; contactAddEdit＆＃34;。

我想在多个地方重复使用此表单，所有这些表单共享相同的数据形状，但由不同的数据源支持。

因此，这意味着同一表单的多个版本可能同时出现在页面上，因此需要不同的名称，以便它们在商店中保持独立。

由于这个要求，我需要能够动态更改用于识别商店中表单的名称。

e.g。

一个实例可能被称为＆＃34; personalContactAddEdit＆＃34;，另一个实例可能被称为＆＃34; businessContactAddEdit＆＃34;。

或＆＃34; contactOneAddEdit＆＃34;，＆＃34; contactTwoAddEdit＆＃34;，＆＃34; contactThreeAddEdit＆＃34;。

等

我使用TypeScript编写的模块和ES模块语法进行导出和导入。这些都与WebPack捆绑在一起。

我一直在思考如何解决这个问题，并且我有一些想法：

每次都要创建一个新的专业版本。

这可能是最简单但最不可取的选择。我将获取现在的模块代码，并将其包装在一个以名称作为参数的函数中，然后使用传递的名称返回结果。这个问题是它必须在每次调用时运行模块的完整代码。

在没有HOC的模块中使用裸组件。

然后为每个唯一名称创建一个新模块，导入组件并从HOC返回结果。

e.g。

PersonalContactAddEdit

import * as ContactAddEdit from "./ContactAddEdit";

export const PersonalContactAddEditForm = ReduxForm.reduxForm<ContactAddEdit.FormData, ContactAddEdit.Props>({
    form: "personalContactAddEdit"
})(ContactAddEdit.ContactAddEdit);

BusinessContactAddEdit

import * as ContactAddEdit from "./ContactAddEdit";

export const BusinessContactAddEditForm = ReduxForm.reduxForm<ContactAddEdit.FormData, ContactAddEdit.Props>({
    form: "businessContactAddEdit"
})(ContactAddEdit.ContactAddEdit);

创建一个工厂，根据名称，该工厂将返回现有的专用版本，或者如果它尚未存在则创建一个新工厂。

这是第一种选择的灵活性，再加上第二种选择的整洁。

我不确定在这种环境中实施此模式的最佳方式。

• 此要求是否有标准/推荐方法？
• 我错过了比上面列出的更好的选择吗？
• 如果工厂是最佳选择，那么实施它的最佳方式是什么？

由于它与模块的概念如此紧密地结合在一起，感觉就像是WebPack可能支持的东西，但我还没有找到任何迹象。

如果我错过了重要信息，请告诉我，我会更新问题。