反应SPA架构问题

时间:2017-05-17 11:33:37

标签: reactjs redux react-redux

我不确定我的React SPA(帐户信息和设置页面)架构是否正确。你能就此提出一些反馈吗?

  1. 创建了一个包装组件。它用于保存状态并调用Rest API方法来更新其状态。我决定在最外层的父母中只保留一个应用程序状态。

  2. 其他组件仅呈现状态道具并使用回调(例如,在输入文本更改时)调用Wrapper组件方法来更改状态。

  3. 现在我遇到了将回调传递给嵌套子进程的问题。

    假如我有5个嵌套的子组件,我必须通过道具将相同的回调传递给最内层的子组件,以及道具。好像坏了,有什么方法可以避免这种情况吗?

    Redux是否倾向于解决此类问题?是否存在React应用程序架构的企业标准?

1 个答案:

答案 0 :(得分:1)

您的问题很常见,而且并不总是一个简单的解决方案。

redux解决的问题:

您的网站上有4个深层嵌套SearchComponents,一个搜索应该触发搜索,它是相同的搜索,但handleSearch函数需要传递4次。 / p>

解决方案:
您将SearchComponent连接到Redux商店,使用Redux修改当前搜索内容的AppWideState

与此同时,在您当前的containerComponent中,您通过商店获得当前搜索请求并可以触发AJAX请求,因此您只需集中并避免传递4个回调。

redux无法解决的问题(开箱即用)

您从互联网上下载了一些很酷的输入字段,并希望在您网站的4个位置使用它,但是您无法访问源代码,并且该组件未连接到redux,您似乎可以&#39 ; t使用第一种方法,但它只是部分正确。此时,您可以Wrap围绕自己wrapperComponent下载的组件 - 从而允许您再次使用第一种方法。

不完全支持的事情

前两个示例假设您的searchComponents触发其他人可以使用的应用范围状态更改。但是,如果您希望限制更新的范围,Redux不再是一个不错的选择 我认为重要的是不要用真正只对一个组件感兴趣的东西来污染全局appState,特别是如果它是一个父组件。 虽然您可以将所有内容连接到Redux,同时消除回调的需要,但它显然不是一个好的设计选择。
在这方面,Redux不能解决全局范围内不需要但深度嵌套的任何事情。