如何在 react/flux 中连接 API 个调用
How to wire up API calls in react/flux
我正在开发一个具有以下设置的项目：React/Flux 通过 wordpress json API 作为 WordPress CMS 后端的前端。
该网站的主要功能包括由 WordPress 页面的分层菜单（父 -> 子；父 -> 子 -> 子等）组成的侧边栏导航。我将这些作为对象提供给 Tree Menu React component 进行渲染。此对象由对 WP 后端的 API 调用提供，以收集所有页面，然后我将其修改为树菜单组件期望的数据结构，以用作侧边栏导航视图的初始状态。
侧边栏还有一个搜索框，当输入超过 3 个字符时，导航应该过滤以仅显示在页面内容、页面名称等中包含搜索查询的 wordpress 页面。我已经完成了这个通过 API 调用 WP 后端来执行 WPQuery，其中 returns 一个页面数组，然后我用它来过滤在上一步中创建的菜单对象。
最后，当用户单击侧边栏菜单中的页面时，我想在不重新加载页面的情况下显示主要内容区域中的内容 url 用于 history/sharing (例如 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 调用 returns 一个数组，我通过使用在 utils/Utils.js.
中定义的 deepPick
非常感谢。
您看到的错误是您在现有派送仍在进行的情况下尝试开始新派送的典型情况。
我简要浏览了您的存储库，但找不到发生这种情况的确切位置。但我确实有一个可能有用的建议：
您可能需要考虑将对 WebAPIUtils 的调用移出操作文件。我知道这可能看起来 st运行ge，但当我正在构建一个 react/flux 应用程序时，它最近进行了 API 调用，当我在我的应用程序中进行该调用时，我 运行 遇到了一些麻烦动作文件。将其移至组件上的方法解决了我的问题。
因此，就我而言，我的组件是一个登录页面，它获取用户的凭据并与他们进行 API 调用。我的结构是这样的：
LoginPage 登录方法 -> 指定登录请求已发生的操作，然后调用 WebAPIUtils -> WebAPIUtils 进行 API 调用，然后调用操作响应 -> 响应操作使用调度程序将负载与对存储的响应分派 -> 存储回调更新以响应接收到的负载。
顺序和你的基本一致，只是调用WebAPIUtils的位置不同。
其次，您是否为您的导航/显示内容页面检查过 react-router？听起来它可以完成你想做的事情。
我正在开发一个具有以下设置的项目：React/Flux 通过 wordpress json API 作为 WordPress CMS 后端的前端。
该网站的主要功能包括由 WordPress 页面的分层菜单（父 -> 子；父 -> 子 -> 子等）组成的侧边栏导航。我将这些作为对象提供给 Tree Menu React component 进行渲染。此对象由对 WP 后端的 API 调用提供，以收集所有页面，然后我将其修改为树菜单组件期望的数据结构，以用作侧边栏导航视图的初始状态。
侧边栏还有一个搜索框，当输入超过 3 个字符时，导航应该过滤以仅显示在页面内容、页面名称等中包含搜索查询的 wordpress 页面。我已经完成了这个通过 API 调用 WP 后端来执行 WPQuery，其中 returns 一个页面数组，然后我用它来过滤在上一步中创建的菜单对象。
最后，当用户单击侧边栏菜单中的页面时，我想在不重新加载页面的情况下显示主要内容区域中的内容 url 用于 history/sharing (例如 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 调用 returns 一个数组，我通过使用在 utils/Utils.js.
中定义的 deepPick非常感谢。
您看到的错误是您在现有派送仍在进行的情况下尝试开始新派送的典型情况。
我简要浏览了您的存储库，但找不到发生这种情况的确切位置。但我确实有一个可能有用的建议：
您可能需要考虑将对 WebAPIUtils 的调用移出操作文件。我知道这可能看起来 st运行ge，但当我正在构建一个 react/flux 应用程序时，它最近进行了 API 调用，当我在我的应用程序中进行该调用时，我 运行 遇到了一些麻烦动作文件。将其移至组件上的方法解决了我的问题。
因此，就我而言，我的组件是一个登录页面，它获取用户的凭据并与他们进行 API 调用。我的结构是这样的：
LoginPage 登录方法 -> 指定登录请求已发生的操作，然后调用 WebAPIUtils -> WebAPIUtils 进行 API 调用，然后调用操作响应 -> 响应操作使用调度程序将负载与对存储的响应分派 -> 存储回调更新以响应接收到的负载。
顺序和你的基本一致，只是调用WebAPIUtils的位置不同。
其次，您是否为您的导航/显示内容页面检查过 react-router？听起来它可以完成你想做的事情。