如何在 react/flux 中连接 API 调用

Question

我正在开发一个具有以下设置的项目：React/Flux 通过 wordpress json API 充当 WordPress CMS 后端的前端。

该站点的主要功能包括由 WordPress 页面的分层菜单（父 -> 子；父 -> 子 -> 子等）组成的侧边栏导航。我将这些作为对象提供给Tree Menu React component 进行渲染。该对象由对 WP 后端的 API 调用提供，用于收集所有页面，然后我将其修改为树菜单组件预期的数据结构，用作侧边栏导航视图的初始状态。

侧边栏还有一个搜索框，当输入超过 3 个字符时，导航应该过滤以仅显示在页面内容、页面名称等中包含搜索查询的 wordpress 页面。我通过使对 WP 后端的 API 调用以执行 WPQuery，它返回一个页面数组，然后我使用这些页面来过滤在上一步中创建的菜单对象。

最后，当用户单击侧边栏菜单中的页面时，我想在主内容区域中显示内容，而无需使用 url 重新加载页面以用于历史记录/共享（例如 reactapp/page/name-of -page 或者可能只是 reactapp/name-of-page)。我还没有尝试完成这个。

目前，当应用程序加载时出现菜单，但是当我在搜索框中输入字符时，我收到此 js 错误：

Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.

在 react/flux 方面，我完全是个菜鸟，所以请有经验的人帮助我了解如何连接我之前描述的工作流程？

我已将我正在处理的当前分支推送到 this github repo。

我目前如何连接的非常基本的概述是： SideBarNav.jsx（从 WP 调用加载菜单）-> SideBarNavActionCreators.js -> WebAPIUtls.js（进行 api 调用并返回和解析菜单 json 对象）-> ServerActionCreators.js（发出接收到的菜单）-> SideBarNavStore（设置菜单私有变量到菜单对象）-> SideBarNav.js（更新状态，以便树菜单组件可以呈现）。

用户输入搜索查询时的类似流程，除了 api 调用返回一个数组，我使用该数组通过使用 utils/Utils.js 中定义的 deepPick 对菜单对象执行递归搜索来修改菜单对象。

非常感谢。

Answer 1

您看到的错误是您在现有调度仍在进行时尝试开始新调度的典型情况。

我简要浏览了您的存储库，但找不到发生这种情况的确切位置。但我确实有一个建议可能会有所帮助：

您可能需要考虑将对 WebAPIUtils 的调用移出操作文件。我知道这可能看起来很奇怪，但是当我最近构建一个进行 API 调用的 react/flux 应用程序时，当我在我的操作文件中调用该调用时遇到了一些麻烦。将其移至组件上的方法解决了我的问题。

因此，就我而言，我的组件是一个登录页面，它获取用户的凭据并与他们进行 API 调用。我的结构是这样的：

LoginPage 登录方法 -> 指定登录请求已发生的操作，然后调用 WebAPIUtils -> WebAPIUtils 进行 API 调用，然后调用响应操作 -> 响应操作使用调度程序将有效负载与响应分派到存储 -> 存储回调响应接收到的有效负载而更新。

顺序和你的基本一样，只是调用WebAPIUtils的位置不同。

其次，您是否检查了 react-router 的导航/显示内容页面？听起来它可以完成你想做的事情。