使用React组件管理数据

Posted 2023-01-14

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

我有2个组件：

• 地址
• 信用卡式

每个Component都有几个输入和api函数来获取数据并进行更新。

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

页

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

提交按钮应该触发更新功能并等待两者都完成。我试图通过道具从Page到子组件提供一个函数，但我认为这是错误的方法。

答案

Redux

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

将redux视为数据库，不要多次存储并保持良好的separation of concerns。有一个很棒的库，可以让你聚合和操作名为reselect的数据。

重新选择

该库将允许您获取商店的多个部分，并在任何给定方案中将它们组合起来以满足您的需求。

Conclusion

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