2015-11-12 19 views
2

所以我对React还是比较陌生的,我无法围绕如何重新渲染基于另一个组件的主要组件的概念进行包装。刷新反应组件或flux/redux中的逻辑?

可以说我们有一个待办事项应用程序,待办事项可以有一个状态(新的,正在运行的,关闭的)。我们在列表中显示所有待办事项,我们可以根据他们的状态过滤这些项目。我们使用像组件这样的引导下拉按钮来设置过滤器,这是一个React组件。现在当我们改变过滤器时,我们显然想要刷新待办事项。

我的问题是,是否选择状态的逻辑属于在流量/终极版或不过滤组件只是说“刷新项目”的主要组成部分?

回答

-1

因此,在一个很小的方式,你可以向下传递函数来选择框,它调用顶级组件上setState。当该状态改变时,它将重新呈现其子组件。这种模式不能很好地扩展,并导致相同的地狱React + Flux试图让我们远离(状态无处不在)。我会说,使用Flux(甚至更好,Redux),会触发一个动作,在您的商店中设置过滤器,并使用基于过滤器状态的派生数据+待办事项列表中的待办事项列表。

+0

是的,这也是我的想法,但它似乎是一个矫枉过正的用于这样一个小事情。我没有想过拥有很多这样的组件,我想当你这么想的时候,把这个逻辑放在一个比较合理的位置是更有意义的。 – user1322163

1

如果使用的是终极版,然后在你的下拉菜单,你应该有一个onchange处理程序,每个值与所选择的状态改变时,调度动作(新,运行,关闭)。

Redux Reducer将通过在商店中相应地更改某些状态来处理此操作,例如:display ='completed'。除此之外,您的待办事项列表也应存储在商店中,并且可能是一个数组。

你的反应组分应接收的待办事项阵列而显示为道具,因此每次任何道具(待办事项阵列或显示器)的变化时,会触发一个重新渲染。

在这种情况下,您的组件应该只显示那些完整的(即在渲染待办事项您检查是否每一个待办事项的状态=== this.props.display

因此,要回答你的问题: REDX保持下拉状态,传递给主要组件,然后只渲染符合标准的待办事项。

5

当您在React应用程序中使用Redux时,请遵循一个简单规则 - 所有您的组件是无状态(表示没有组件初始化其状态或调用.setState()任何地方)。

基于state container的设计的还原方式,一个保存所有应用程序状态的对象。作为React组件,Redux会将connected作为this.props.state属性传递给该组件,Redux会将该状态(或其部分)传递给该组件。

这高阶组件(或智能型组件),使得其子组件(或哑组件),并从他们处理事件。

如果子部件需要改变,它会触发相应的处理程序(其通常为props传递)。改变国家的唯一方法是派遣一项行动。该操作包含一个类型和一个有效负载,并根据该类型选择相应的减速器。 reducer然后基于之前的状态和动作有效载荷产生一个新状态。

如果在reducer调用的结果中状态发生了变化,Redux将重新渲染高阶组件,在属性中传递新的状态。所以,所有的子组件都会相应地更新。

检查example并跟踪如何AddTodo组件调用.handleClick(),然后再调用.onAddClick()调度一个动作。

+1

请注意,它不具有*作为一个容器组件(又名智能组件)。您可以在应用程序中拥有许多容器组件。 –

+0

不好意思把老话题和@DanAbramov也许可以帮助我理解这一点。高阶组件重新呈现的究竟是什么?我已经看到你订阅了更高阶的组件,但我没有在其他教程或种子项目上看到它。 'connect'神奇地为我们做了吗?如果是这样,它只是组件被重新渲染或整个应用程序? – shriek

+0

我想我现在明白了。 'connect'实际上是订阅应用程序的''状态',并在'restore'状态发生变化时强制更新,这也应该澄清我的后者的疑问。 – shriek