redux - 使用 Redux 从dumb组件进行 api 调用

Question

我想用 react 和 redux 实现下拉。 Dropdown 将成为其他组件的一部分，因此，它确实是“哑”组件。但是下拉菜单应该调用 api 来获取项目、应用自定义过滤器等。应该对 API 调用进行身份验证， token 将其存储为全局状态。我应该将 token 传递给组件 Prop 吗？或者有更好的方法来做到这一点？

Answer 1

根据定义，愚蠢的组件应该是愚蠢的:这意味着它应该“从顶部”获取所需的一切，即通过 Prop 。

只有层次结构中的“智能”(“连接”到 Redux)组件会使用新的(异步)Action 处理获取数据，然后在 API 调用返回时修改状态，这将重新呈现您的带有新 Prop 的哑组件。

所以在 Redux 中:

你的 Dumb 组件有两个 props:一个是来自你的 API 的值(实际上是你的“状态”的一部分)，另一个是当你的下拉选择项更改时调用的函数。 <MyDumbComponent data={this.props.data} onChange={this.onChange.bind(this)} />

然后层次结构中的“智能”组件将监听该 onChange 函数，并调度一个 Action (FETCH_DATA)

(async) Action 会调用API，当接收到数据时，调用另一个Action (FETCH_DATA_SUCCESS) 与数据

然后 Redux 会使用 reducer 从 Action 有效负载

更新其状态。

这将使用来自当前状态的新 Prop (新数据)重新渲染您的组件。

您可能想阅读以下内容: http://redux.js.org/docs/basics/UsageWithReact.html

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