使用Redux从哑组件调用api

Question

我想用react和redux实现下拉列表.下拉将是其他组件的一部分,因此,它真的是"哑"组件.但是下拉列表应该调用api来获取项目,应用自定义过滤器等.应该对Api调用进行身份验证,令牌存储为全局状态.我应该将令牌传递给组件道具吗？或者有更好的方法来做到这一点？

Answer 1

根据定义,一个愚蠢的组件应该是愚蠢的:这意味着它应该"从顶部"(即通过道具)获取所需的一切.

在层次结构中只有一个"智能"("连接到Redux")组件将处理使用新的(异步)Action获取数据,然后在API调用返回时修改状态,这将重新呈现哑元组件及其新道具.

所以在Redux中:

• 你的Dumb组件有两个道具:一个带有来自你的API的值(实际上是你的"状态"的一部分),另一个是当你的下拉选择项改变时调用的一个函数. <MyDumbComponent data={this.props.data} onChange={this.onChange.bind(this)} />
• 然后,层次结构中的"智能"组件将侦听onChange函数,并调度Action(FETCH_DATA)
• (async)Action将调用API,并在接收数据时,使用数据调用另一个Action(FETCH_DATA_SUCCESS)
• 然后,带有reducer的Redux将从Action有效负载更新其状态
• 这将使用来自当前状态的新道具(新数据)重新呈现您的Component.

您可能需要阅读此内容:http://redux.js.org/docs/basics/UsageWithReact.html

关于异步操作:http://redux.js.org/docs/advanced/AsyncActions.html