首页 文章

刷新反应组件或通量/还原的逻辑?

提问于
浏览
2

所以我对React相当新,我无法围绕如何基于另一个组件重新渲染主要组件的概念 .

假设我们有一个待办事项,待办事项可以有一个状态(新的,运行的,关闭的) . 我们在列表中显示所有待办事项,我们可以根据状态过滤项目 . 我们使用bootstrap dropdownbutton like component来设置过滤器,这是一个React组件 . 现在,当我们更改过滤器时,我们显然想要刷新待办事项 .

我的问题是,所选状态的逻辑是否属于Flux / Redux,或者过滤器组件是否只是将“刷新项目”说成主要组件?

3 回答

  • 1

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

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

    该高阶组件(或智能组件)呈现其子组件(或哑组件)并处理它们的事件 .

    如果子组件需要更改,它会触发相应的处理程序(通常作为 props 传递) . 改变状态的唯一方法是派遣一个动作 . 该操作包含类型和有效负载,并且基于该类型,选择相应的reducer . 然后,reducer根据先前的状态和动作有效负载生成新状态 .

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

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

  • 5

    如果您正在使用redux,那么在您的下拉列表中,您应该有一个onchange处理程序,每次使用所选状态(new,running,closed)更改值时,都会调度操作 .

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

    您的react组件应该接收一个todo数组并显示为props,因此每当任何prop(todo数组或显示)发生更改时,它都会触发重新呈现 .

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

    所以回答你的问题:redux保持下拉状态,传递给你的主要组件,你的主要组件然后只渲染符合条件的待办事项 .

  • -1

    因此,以非常小的方式,您可以将函数传递给选择框,该选择框在顶级组件上调用 setState . 当该状态改变时,它将重新呈现其子组件 . 此模式在待办事项列表中没有't scale well, and leads to the same hell React + Flux is trying to get us away from (state everywhere). I would say, using Flux (or even better, Redux), trigger an action that sets the filter in your store, and use derived data based on the filter state + your list of todo' .

相关问题