javascript - 使用 React 组件管理数据

Question

我正在尝试构建一个新的 React 应用程序，但我对架构有一些疑问。

我有两个组件:

• 地址
• 信用卡

每个组件都有多个输入和 api 函数来获取数据并更新数据。

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

页面

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

提交按钮应触发更新功能并等待两者完成。 我试图通过 props 将页面的功能提供给子组件，但我认为这是错误的方式。

Answer 1

终极版

对于不同组件之间的复杂交互，您可以使用 redux . Redux 保存整个应用程序的状态，并且只能通过 actions 进行更新。 一个 Action 将触发一个 reducer。 reducer 会返回一个新版本的状态，其中包含您在那里设置的任何更新。

像对待数据库一样对待 redux，不要多次存储东西并保持良好状态 separation of concerns .有一个很棒的库，可让您聚合和操作名为 reselect 的数据。 .

重新选择

此库可让您获取商店的多个部分，并将它们组合起来以满足您在任何给定场景中的需求。

结论

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