React Redux,组件内部状态同步

时间:2018-08-06 16:41:12

标签: reactjs redux

这有点复杂,所以我会尽量简化。

我的应用程序中有一个非常复杂的可重用组件。 基本上,它是具有许多编辑选项的大表。 由于该组件应该可重用,所以我认为它应该管理自己的状态。 这也很有意义,因为该组件的业务逻辑非常复杂,并且通过使用redux,我可能不得不重复一些疯狂的样板。 另一方面,该组件应该能够加载一些默认数据,最后,在某些情况下,该组件是表单的部分,因此我应该能够提取其数据并将其发送到服务器。 Redux确实可以帮助完成最后两个任务-如果我有一种简单的方法将所有组件更改存储在存储中,那么我可以轻松地从那里加载默认数据(因为我的组件将受到完全控制),这也很容易发送到服务器时从存储中提取数据。 虽然,它有很多样板,但在我的减速器中编写针对Componenet的特定逻辑对我来说并不值得,因为理想情况下,它们可以自我管理。 还有其他想法吗?

我有一个想法似乎可行,尽管我不确定它有多好:

  1. 具有“ dataKey”属性以处理默认数据属性更改,并从数据中获取状态
  2. 使用一些提交回调来提取数据并发送到服务器

任何其他想法都会非常有帮助,thakns!

1 个答案:

答案 0 :(得分:1)

由于您的问题有点抽象,因此很难提供摘录答案。但是由于您只是在寻找想法,所以这只是您可以尝试将其与实际用例结合的想法。

在这种情况下,我将首先区分我的实际数据和UI状态。然后,我将使用常规的valueonChange道具将我的组件编写为实际数据的受控组件。 UI状态将保持在组件的内部状态,并且可以从初始属性派生,也可以使用默认值初始化。当用户与组件交互时,如果更改仅影响内部状态,我们可以仅使用setState来更新状态。如果它也影响数据,我们也可以相应地触发onChange prop。这样,我们可以将实际数据保留在redux存储中,但仍将组件特定的逻辑保留在组件中。

作为一个例子,假设我们要制作一个带有行内/就地编辑支持的文本标签组件。我仍将使该组件的属性类似于默认的HTML输入元素valueonChange。但是,指示使用“提交”和“取消”按钮呈现文本还是输入元素的标志将保留在组件中,为isEditMode。最初,我们可以始终将isEditMode保留为false。但是,当用户单击文本时,我们将其更改为true,以便该组件将呈现要编辑的元素并隐藏标签。当用户更改文本时,我们也可以将该中间值保持在UI状态。但是,当用户单击“提交”时,我们可以使用状态为新的值触发onChange并将isEditMode也更改为false。同样,我们可以将组件保留为控制组件,但仍可以使用组件状态来管理中间UI状态。

希望这会有所帮助!