【问题标题】:Reselect - does it ever make sense to pass only part of the state to a selector重新选择 - 只将部分状态传递给选择器是否有意义
【发布时间】:2016-10-20 21:13:29
【问题描述】:

我的商店包含goals 的数组。有一个 Goal 组件,我使用 connect() 连接到 redux 存储,所以它有一个 goal 作为它的道具。

Goal 组件有子组件,它们都需要整个目标对象来创建派生数据。我想使用 reselect 来帮助提取这些数据的派生方式,但是当我已经可以访问目标时,再次从整个 redux 存储中选择相同的目标对我来说没有意义。

所以我目前正在将目标对象从 Goal 组件传递给它的子组件,并在这样做时调用它的选择器。

这意味着选择器的参数只是一个目标,是状态的一部分,而不是状态的全部。如何使用它的所有示例都使用“连接”,因此选择器函数可以获取整个状态。

我的方法有意义吗?还是我完全没有抓住重点,没有正确封装状态树的形状?

任何 cmets / 建议将不胜感激

【问题讨论】:

    标签: reactjs redux react-redux reselect


    【解决方案1】:

    选择器的目的是保存派生数据,这样您的 redux 存储就不必这样做了。传入状态树的子片段是合法的:

    const getThing = state => state.the.thing.I.care.about;
    const getBoundaryConditions = state => state.the.boundary.conditions.man.whoa;
    
    export const getTheThingICareAbout = createSelector(
      [ getThing, getBoundaryConditions ],
      (thing, conditions) => {
        //do stuff to thing depending on conditions
        return thing.beConditionallyAwesome(conditions);
      }
    );
    

    另外,虽然可以通过 props 将目标对象传递给 Goal 组件的子组件,但最好通过 props 将 id 值(或其他东西)传递给子组件并让子组件获取相应的使用connect() 来自状态树的目标(请参阅connect() here 的强大的第三个mergeProps 参数,它允许您在整个状态树和调度旁边使用传入的道具ownProps - 它可以非常方便) .

    这样更好,因为 Goal 组件不必通过 prop 向下传递一个大的胖对象。相反,子组件可以在 mapStateToProps() 中选择他们关心的目标对象的特定部分,并保持组件 props 应该是浅的。

    ...至少这是我的看法。祝你好运!

    【讨论】:

    • 太棒了,感谢您的帮助。所以澄清一下 - goalComponent 从 props 接收它的 id,然后使用选择器并连接来获取状态的目标部分。 (我已经做了那部分)但是我没有将整个目标传递给每个goalChildComponent,而是再次传递id,每个goalChildComponent调用相同的函数再次从状态中选择相同的目标,并且只是使用不同的函数来创建不同的派生数据?我不喜欢在我可以随意传递的情况下反复抓取该州的同一部分的想法。但我认为你是对的。
    • 您的建议与文档的建议相符,所以我会同意的。再次感谢!
    【解决方案2】:

    你可以选择通过 props 传递一个目标(从父母到孩子)——这意味着父母是“聪明的”(知道状态)而孩子是“愚蠢的”(只是渲染它在 props 中给出的内容) )。

    或者,您可以访问子组件中的状态(尽可能多或尽可能少)。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-08-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多