javascript - 如何使具有异步数据的 React 组件可在 Redux 流程中重用？

Question

这与其说是技术问题，不如说是架构问题。我正在开发具有以下结构(标准 Redux)的应用程序。

UserFormContainer->UserForm->(Fields, RoleField, Group Field)。现在，除了 Role 和 Group 之外，我的所有字段都是dumb组件，它们依赖于要填充的服务器数据。根据标准的 redux，我的状态是单向流，所有数据都通过主容器，dumb组件只分派(dispatch) Action 。

我的问题是，由于 Angular 色和组字段依赖于它的数据父组件，我该如何使它们可重用？最佳做法是什么？

这是我的基本组件的一种流程。

Answer 1

RoleField 应该是一个dumb组件，它从 UserForm 组件获取数据。 UserForm 应该从存储中获取数据并将其作为 props 传递给 RoleField。这样 RoleField 就可以重用，因为它们可以显示从父组件传递给它们的数据。

更新

您还可以使 UserForm 成为可以接受自定义表单字段作为子项的包装容器。请参阅下面的示例代码

render() {
  <UserForm>
    <RoleField customData={ dataFromStore }/>
  </UserForm>
}