Redux / MobX-我需要通过React中的props在子组件中传递数据吗?

时间:2018-06-29 20:04:44

标签: reactjs redux mobx mobx-react

我知道这听起来像是一个愚蠢的问题,但是我无法解决这个问题。请忍受我。

如果在React中使用像Redux / Mob X这样的状态管理系统,我想这些状态管理技术的主要目的是提供单一数据源和更结构化的更新方法。

说,我正在使用状态管理库(MobX)进行React,并且假设我有一个父组件,该组件进行http API调用并使用API​​响应更新MobX存储。现在,我需要将这些数据放在子组件/嵌套组件之一中。 我的问题是,我应该将该数据作为道具传递给子组件,还是应该使子组件与Central Store连接并直接获取该数据?

通过将子级连接到存储,我将子级变成一个类组件,这使其变得更沉重,并且React优化可能不适用。我正在破坏功能组件的全部目的。

等待回复。

最好的问候, 拉利特

1 个答案:

答案 0 :(得分:0)

这完全取决于情况。我建议将您的组件分为两部分:

  1. 可以在其他项目中重复使用的组件
  2. (更高级别)特定于该项目的组件,以至于它们可能永远不会被重复使用。

对于类别1的组件,我建议不要直接使用mobx存储,而应使用纯React组件。 (例如,考虑下拉列表或Ajax下拉组件)。

对于第二部分组件(想想,网站的页眉,页脚,部分组件)。只需使它们直接与Mobx商店进行交互即可,这样您就可以更快地编写所需的代码(而不是不断地提供所有内容)。

添加

对于类别1的组件,您始终可以使用@inject()方法包装它们。例如,通过这种方式,您可以将下拉组件转变为将mobx存储用于其状态的UserDropdown组件。 (inject方法将mobx状态作为道具注入组件中。)

const UserDropDownComponent = mobx.inject(stores => ({users: stores.userStore.users}))(DropDownComponent);
// usage:
<UserDropDownComponent />

警告

对于纯组件,总不会看到mobx状态的变化。要解决此问题,您需要将组件包装在@observe批注中。或者,您必须通过将道具包裹在mobx.toJS(yourMobxStateProperty)

中来注入道具