i'm working on project following setup: react/flux acting front end wordpress cms backend via wordpress json api.
the major functionality of site includes sidebar nav composed of hierarchical menu of wordpress pages (parent -> child; parent -> child -> child, etc). i'm providing these object tree menu react component rendering. object provided api call wp backend gather pages modify data structure expected tree menu component use initial state sidebar nav view.
the sidebar has search box when 3+ characters entered, nav should filter show wordpress pages contain search query in page content, page name, etc. i've accomplished making api call wp backend wpquery returns array of pages use filter menu object created in previous step.
finally, when user clicks page in sidebar menu, i'd display content in main content area without page reload url use history/sharing (e.g. reactapp/page/name-of-page or maybe reactapp/name-of-page). haven't yet attempted accomplish this.
at moment, when app loads menu appears, when enter characters in search box receive js error:
uncaught error: invariant violation: dispatch.dispatch(...): cannot dispatch in middle of dispatch. i'm total noob when comes react/flux more experienced please me understand how wire workflow described earlier?
i've pushed current branch i'm working on github repo.
very basic overview of how have things wired is: sidebarnav.jsx (call load menu wp) -> sidebarnavactioncreators.js -> webapiutls.js (api call made , menu json object returned , parsed) -> serveractioncreators.js (emit received menu) -> sidebarnavstore (sets menu private var menu object) -> sidebarnav.js (update state tree menu component can render).
similar flow when user enters search query, except api call returns array used modify menu object performing recursive search of menu object using deeppick defined in utils/utils.js.
many in advance.
the error you're seeing typical of situation in you're trying start new dispatch while existing dispatch still going.
i looked through repo briefly , not find exact place happening. have suggestion might help:
you might want consider moving call webapiutils out of actions file. know might seem strange, building react/flux app made api calls ran trouble when had call in actions file. moving method on component solved issues.
so, in case, component login page took user's credentials , made api call them. structure went this:
loginpage login method -> action specify login request has occurred, call webapiutils -> webapiutils makes api call, calls action response -> action response uses dispatcher dispatch payload response stores -> store callbacks update in response received payload.
the sequence same yours, exception of location of call webapiutils.
second, have checked out react-router navigation / displaying content pages? sounds accomplish you'd do.
Comments
Post a Comment