reactjs - The most convenient pattern for XHR and route change in React/Redux application -

i'm working on react+redux application, , have search functionality in it. ui quite similar other search engine - there home page, , search result page.

so search results, have action requestsearch, returns object action type , data. captured redux-saga, make request api, process response , dispatch new action search results, captured reducer. not question.

the questions is, initiate whole thing? also, best place routing here (react-router v3), change route? i'm asking pattern, because obviously, i'm missing important here. far tried 2 ways implement that:

• call requestsearch actions on search form submit , change route history.push();
• change route , call requestsearch search result page container.

i'm not satisfied both of these solutions. appreciate help, suggestions or criticism.

•call requestsearch actions on search form submit , change route history.push();

ok, possible approach decision of task on other hand , consider several moments. first, if use react-router, isn't necessary direct calls history.push more, instead necessary use konsistenty , cause push function https://github.com/reactjs/react-router-redux there necessary.

secondly, in redux-saga there access push action store - in current case react-router-redux action push appropriate url:

import { push } 'react-router-redux' yield put(push('/foo')) 

setup store following:

import { routermiddleware, push } 'react-router-redux'  // apply middleware store const middleware = routermiddleware(browserhistory) const store = createstore(   reducers,   applymiddleware(middleware) )  // dispatch anywhere normal. store.dispatch(push('/foo'))