Question

我有一个包含3种不同形式的登录页面。到目前为止，登录页面不一定需要连接到redux，数据是静态的，不会改变。但是，这些表单会获取数据，并允许用户根据它们对应于并连接到Redis的特定服务来过滤选项。这些表单的外观和功能几乎相同，但是所有表单都具有不同的端点。

在这里帮助我解释的是表格的粗略渲染。 s＃是一个select下拉列表，按钮基本上是一个链接，可以将用户带到一个页面，其中包含有关所选值的更多信息。

|------------|
|    FORM    |
|------------|
|-----s1-----|
|-----s2-----|
|-----s3-----|
|--[button]--|

如果对s1进行了更改，则会触发api调用，该api调用将检索s2和s3的有效选项并更改按钮的链接。同样，如果更改了s2，则s1和s2中的选择组合将确定s3中的选项。

基本上可以使表单使用相同的reduce和动作，但仅具有不同的URL，具体取决于通过道具传递给表单的API端点。

问题是，通过传递给react-redux connect的存储密钥将它们设为3个单独的存储是否更有意义，还是应该将这些存储在同一个存储中，然后根据一些唯一的属性注册一个顶级reducer ID？

因此3个具有以下顶级数据结构的商店

{
  selected: { [field: string]: string }
  options: { field: string]: string[] }
}

或者像一个商店，每个表单都在formId上注册一个reducer？

{
  [formId: string]: {
    selected: { [field: string]: string },
    options: { field: string]: string[] }
  }
}

Answer 1

我最终为每个表单使用唯一的密钥来处理此问题，并将所有表单都保存在同一顶层存储中。

我有一个具有registerModule动作的主ModuleReducer。此操作将触发将密钥添加到存储中。最主要的是，每个动作都流经模块简化器，如果不是模块操作，则将其传递给其他简化器以获取特定键。

这是代码的简化示例。

interface FormOptions {
  [key: string]: any;
}

interface FormValues {
  [key: string]: any;
}

interface ModuleState {
  options: FormOptions;
  selectedValues: FormValues;
}

interface AppStore {
  [id: string]: ModuleState;
}

const moduleReducer = (state: AppStore = {}, { type, payload }: AnyAction) => {
  const { formId } = payload;
  switch (type) {
    case 'REGISTER':
      return {
        ...state,
        [formId]: { options: {}, selectedValues: {} }
      };
    default:
      const { options, selectedValues, ...restState } = state[formId];
      return {
        ...state,
        [formId]: {
          ...restState,
          options: optionsReducer(options, ({ type, payload })),
          selectedValues: valueReducer(selectedValues, ({ type, payload }))
        }
      };
  }
}

如果表单引用了AppStore中的通用值，我最终决定采用这种方式。

Answer 2

状态切片是减少器的作用之一。应用程序通常应该只有一个全局存储。在您的情况下，您想为三种形式中的每一种分裂状态，因此为此创建一个或多个简化器更为有意义。如果每种形式的状态彼此密切相关，则使用一个化简器的方法很好，但是对于不相关的数据，请考虑创建多个化简器，并使用CombineReducers函数。

是否有多个redux商店或CombineReducer用于类似形式？

2 个答案: