javascript - 在 React Flux 上,我应该在哪里填充商店的初始状态?

标签 javascript reactjs reactjs-flux flux

我正在研究 Flux,我想我了解工作流程:

View -> Action -> Dispatcher -> Store -> View

但是,我不太明白应该在哪里填充商店的初始状态。

例如,假设我正在编辑联系人。所以我假设我有一个 ContactsStore。这是我想象的当我访问 URL /contacts/edit/23 时会发生的情况:

  1. 我的 ContactsStore 以某种方式填充了我正在编辑的联系人,在本例中为联系人 23。数据将来自服务器。
  2. EditContact View 会收到来自 ContactsStore 的通知,因此它会呈现初始状态。
  3. 当我保存联系人时, View 将触发 SaveContact 操作,流程将继续。

我不清楚步骤 (1)。 ContactsStore 应该在哪里填充初始状态?我在哪里调用服务器?它在商店中吗?

谢谢。

最佳答案

您需要有权访问 EditContact 组件中的操作和商店。在 componentDidMount 处理程序中,您可以触发执行 api 请求的操作。成功后,它将联系人传递给 dispatcher/store。一旦商店收到 contact,它就会触发 EditContact 组件订阅的事件。在相应的处理程序中,组件使用新联系人设置新状态。我敢肯定还有其他方法可以做到这一点,但我就是这样做的。

关于javascript - 在 React Flux 上,我应该在哪里填充商店的初始状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31589305/

相关文章:

javascript - 如何在 Javascript 中使用 Babel 脚本的对象?

javascript - 无法读取未定义的属性 '__reactAutoBindMap'

reactjs-flux - 如何删除/卸载嵌套的 react 组件

javascript - 存储可重用的 React+Flux 表单组件(一个组件用于具有不同字段的多个表单)

javascript - 基于回调返回 Observable

javascript - Express & Jade,向布局添加代码的模板

javascript - 在 JSX 的嵌套 map 函数中 react JS 打印数据

JavaScript 表单验证未按预期工作,即使有错误也会提交表单

javascript - 我如何从输入中获取值,将其四舍五入到下一个偶数并将其设置为新变量

reactjs - 如何在 Apollo 中为 refetchQueries 传递变量