如何在react / flux

时间:2015-07-17 15:56:56

标签: javascript wordpress api reactjs flux

我正在使用以下设置处理项目:React / Flux通过wordpress json API充当WordPress CMS后端的前端。

该网站的主要功能包括由WordPress页面的分级菜单组成的侧边栏导航(父级 - >儿童;父级 - >儿童 - >儿童等)。我将这些作为Tree Menu React component的对象提供给渲染。此对象由对WP后端的API调用提供,以收集所有页面,然后将其修改为Tree Menu Component期望的数据结构,以用作侧边栏导航视图的初始状态。

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

最后,当用户点击侧边栏菜单中的页面时,我想在主内容区域中显示内容,而不会使用网址重新加载网址以用于历史记录/共享(例如reactapp / page / name -of-page或者只是reactapp / page-of-page)。我还没有尝试过这个目标。

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

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

在谈到反应/流量时,我是一个完全的菜鸟,所以更有经验的人请帮助我了解如何连接我之前描述的工作流程?

我已将当前的分支机构推到了 this github repo

关于我目前如何连线的非常基本的概述是: SideBarNav.jsx(从WP调用加载菜单) - > SideBarNavActionCreators.js - > WebAPIUtls.js(进行api调用并返回并解析菜单json对象) - > ServerActionCreators.js(发出收到的菜单) - > SideBarNavStore(将菜单私有var设置为菜单对象) - > SideBarNav.js(更新状态,因此Tree Menu组件可以呈现)。

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

非常感谢提前。

1 个答案:

答案 0 :(得分:1)

您看到的错误通常是在现有调度仍在进行时您尝试启动新调度的情况。

我简要地查看了你的回购,找不到发生这种情况的确切位置。但我确实有一个可能会有所帮助的建议:

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

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

LoginPage登录方法 - >指定已发生登录请求的操作,然后调用WebAPIUtils - > WebAPIUtils进行API调用,然后调用响应操作 - >响应操作使用调度程序通过对存储的响应来调度有效负载 - >存储回调更新以响应收到的有效负载。

序列与您的序列基本相同,但调用WebAPIUtils的位置除外。

其次,你有没有检查过react-router是否有导航/显示内容页面?听起来它可以完成你想要做的事情。