使用React组件管理数据

时间:2019-03-21 09:39:03

标签: javascript reactjs architecture

我正在尝试构建一个新的react应用,我对体系结构有一些疑问。

我有2个组成部分:

  • 地址
  • 信用卡

每个组件都有几个输入和api函数,以获取数据并进行更新。

当我在一个页面中同时使用两个组件时,如何触发两个组件的更新?

页面

  • 地址
  • 信用卡
  • 提交按钮

“提交”按钮应触发“更新”功能,并等到两者均完成后再进行。 我尝试通过道具将Page函数提供给子组件,但是我认为这是错误的方法。

1 个答案:

答案 0 :(得分:1)

Redux

对于不同组件之间的复杂交互,可以使用redux。 Redux保留整个应用程序的状态,并且只能使用actions更新。 一个动作将触发一个reducer。 reducer返回状态的新版本以及您在其中设置的更新。

处理redux之类的东西,例如数据库,不要多次存储它们并保持良好的separation of concerns。有一个很棒的库,可让您汇总和操作名为reselect的数据。

重新选择

此库将使您可以使用商店的多个部分,并在任何给定情况下将它们组合以满足您的需求。

结论

总而言之,这些库是我使用大约2.5年(仅重新选择1年)的堆栈的一部分。我发现它们在处理复杂数据方面非常强大。话虽这么说,还有其他选项,如graphql,apollo或relay。