CODEWITHSUNDEEP
javascriptwordpressapireactjsflux
Ian White
Ian White

Reputation: 27

How to wire up API calls in react/flux

I'm working on a project with the following setup: React/Flux acting as the front end to a WordPress CMS backend via wordpress json API.

The major functionality of the site includes a sidebar nav composed of a hierarchical menu of WordPress pages (parent -> child; parent -> child -> child, etc). I'm providing these as an object to Tree Menu React component for rendering. This object is provided by an API call to the WP backend to gather all pages which I then modify into the data structure expected by the Tree Menu Component to use as the initial state for the sidebar nav view.

The sidebar also has a search box that when 3+ characters are entered, the nav should filter to only show the wordpress pages that contain the search query in the page content, page name, etc. I've accomplished this by making an API call to the WP backend to do a WPQuery which returns an array of pages which I then use to filter the menu object created in the previous step.

Finally, when a user clicks a page in the sidebar menu, I'd like to display the content in the main content area without a page reload with url to use for history/sharing (e.g. reactapp/page/name-of-page or maybe just reactapp/name-of-page). I haven't yet attempted to accomplish this.

At the moment, when the app loads the menu appears, but when I enter characters in the search box I receive this js error: 

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

I'm a total noob when it comes to react/flux so will someone more experienced please help me understand how to wire up the workflow I described up earlier?

I've pushed the current branch I'm working on to this github repo.

Very basic overview of how I have things wired up currently is: SideBarNav.jsx (call to load menu from WP) -> SideBarNavActionCreators.js -> WebAPIUtls.js (api call is made and menu json object is returned and parsed) -> ServerActionCreators.js (emit received menu) -> SideBarNavStore (sets menu private var to menu object) -> SideBarNav.js (update state so Tree Menu component can render).

Similar flow for when a user enters a search query, except the api call returns an array that I used to modify the menu object by performing a recursive search of the menu object using the deepPick defined in utils/Utils.js.

Many thanks in advance.

Upvotes: 0

Views: 919

Answers (1)

hmlee
hmlee

Reputation: 887

The error you're seeing is typical of a situation in which you're trying to start a new dispatch while an existing dispatch is still going.

I looked through your repo briefly and could not find the exact place that this is happening. But I do have a suggestion that might help:

You might want to consider moving the call to WebAPIUtils out of the actions file. I know this might seem strange, but as I was building a react/flux app that made API calls recently I ran into some trouble when I had that call in my actions file. Moving it to the method on the component solved my issues.

So, in my case, my component was a login page that took the user's credentials and made an API call with them. My structure went like this:

LoginPage login method -> Action to specify that login request has occurred, then call to WebAPIUtils -> WebAPIUtils makes API call, then calls action for response -> Action for response uses dispatcher to dispatch payload with response to stores -> store callbacks update in response to received payload.

The sequence is basically the same as yours, with the exception of the location of the call to WebAPIUtils.

Second, have you checked out react-router for your navigation / displaying content pages? Sounds like it could accomplish what you'd like to do.

Upvotes: 1

Related Questions