Question

关于如何将redux-form减速器安装在正确的位置，我被困在这里。

我有一个名为person的命名空间的初始状态（在应用程序中的许多其他命名空间中），如下所示：

{
  personList: [],
  creatingNewPerson: false,
  newPerson: {}
}

newPerson状态是一种形式。如何让redux-reducer单独作用于newPerson状态呢？

当然，你可以做类似

的事情

combineReducers({
  person: personReducer, // that's a reducer using the above json
  newPerson: formReducer // import { reducer as formReducer } from 'redux-form'
})

但那不是我追求的结构。 newPerson的州将在人员州之外进行管理。但我希望它能在里面进行管理。

状态redux-form管理时应该可以进行JSON序列化。

如何实现这一目标？希望我能说清楚自己吗？

Answer 1

不幸的是redux-form在这种特殊情况下似乎很自以为是，the general sentiment from the documentation非常明确：您应该将formReducer挂载到状态树的根目录下form -key。

原因很简单：formReducer将处理所有表单的状态，而不仅仅是新人表单。因此，州将看起来像这样：

{
  person: { ... person-related state ... },
  form: {
    NewPersonForm: { ... new person form state ... },
    SomeOtherForm: { ... some other form state ... },
    ...
    NthAdditionalForm: { ... nth additional form state ... }
  }
}

这意味着如果你想为嵌套在reducer中的每个表单定位状态，结果对象将最终进入，你必须在多个位置添加formReducer的实例，这将不必要地使你的州变得复杂。

我的建议：在这种情况下吃掉你的谚语绿色，只需将formReducer插入默认位置，因为这样你就可以享受redux-form的强大功能，而不会有任何额外的麻烦。< / p>

现在，在阅读了上述内容之后，如果您仍未设置实际将formReducer安装在州树的潮湿和黑暗迷宫深处，您可以做点什么如下：

combineReducers({
  persons: combineReducers({
    person: personReducer,
    newPerson: formReducer
  }),
  other: otherReducer,
  ...
  some: someReducer
})

然后您还需要将getFormState传递给每个reduxForm包裹的组件，以便他们知道您隐藏其状态的位置：

const getFormState = state => {
  // return the slice of state where we hid formReducer
  return state.persons.newPerson
}

reduxForm({ getFormState })(SomeForm)

这是我不能，良心，推荐，但应该产生你想要的结果（除了可能会产生令人讨厌的副作用，如果你在你的应用程序中添加超过这一个表格）。

希望这有帮助！

如何将redux-form进一步安装在嵌套状态结构中？

1 个答案: