Skip to content
This repository has been archived by the owner on Oct 26, 2018. It is now read-only.
This repository has been archived by the owner on Oct 26, 2018. It is now read-only.

Double location change pushing an url in action creator #429

Closed
maiopirata opened this issue Jul 29, 2016 · 0 comments
Closed

Double location change pushing an url in action creator #429

maiopirata opened this issue Jul 29, 2016 · 0 comments

Comments

@maiopirata
Copy link

maiopirata commented Jul 29, 2016

I've an Isomorphic app.
I'm experiencing a problem similar to #403 I tried to put in my package.json:
"react-router-redux": "dlmr/react-router-redux#fix-inital-server-load-dist",
but it is not working...

In my action creator I have:

export function formComplete(id, router) {
  return (dispatch, getState) => {
    dispatch(checkForm(id))

    if (getState().registration[id]) {
      return dispatch(formPassed(id, router))
    }
  }
}

The first action check that the page is completed and in that case a second action is dispatched:

export function formPassed(id, router) {
  router.push('/registration')
}

Now I'm in an url that is /registration/login. When I click to validate the form the two actions are dispatched in the correct order and finally my app redirects to /registration.. But it automatically redirect a second time to registration/login

My client.js:

let preloadedState = window.__PRELOADED_STATE__
const persistedState = loadState()
if (persistedState != null) preloadedState = persistedState

const store = configureStore(preloadedState, browserHistory)
const rootElement = document.getElementById('app')
const history = syncHistoryWithStore(browserHistory, store)

store.subscribe(throttle(()=> {
  saveState(store.getState());
}, 1000))

render(
  <Provider store={store}>
    <Router routes={ routes } history={ history } 
      onUpdate={() => { window.scrollTo(0, 0) }} 
     />
  </Provider>, rootElement
)

my server.js

function storeUpAndGo (sessionState, history) {

    // setup of the Redux store
    let preloadedState = { rootReducer }
    const persistedState = loadState(sessionState)
    if (persistedState != null) {
      preloadedState = persistedState
    }

    // Create a new Redux store instance
    return configureStore(preloadedState, history)

  }

  // This is fired every time the server side receives a request
  const jsFile = parameters.chunks().javascript.main
  const cssFile = parameters.chunks().styles.main

  app.use(handleRender)

  function handleRender(req, res) {

    const memoryHistory = createMemoryHistory(req.url)
    const store = storeUpAndGo(req.session, memoryHistory)
    const history = syncHistoryWithStore(memoryHistory, store)

    match({ history, routes, location: req.url }, (err, redirectLocation, renderProps) => {
      if (err) {
        console.error(err);
        return res.status(500).end('Internal server error');
      }

      if (!renderProps) {
        return res.status(404).end('Not found.');
      }

      const params = qs.parse(req.query)

      const InitialComponent = (
        <Provider store={store}>
           <RouterContext {...renderProps} />
        </Provider>
      );

      // Render the component to a string
      const html = renderToString(InitialComponent)

      // Grab the initial state from our Redux store
      const finalState = store.getState()

      // Send the rendered page back to the client
      res.send(renderFullPage(html, finalState))
    })
  }

and finally my configureStore

export default function configureStore(preloadedState, history) {

  const logger = createLogger();
  const middleware = routerMiddleware(history)
  const store = createStore(
    rootReducer,
    preloadedState,
    compose(applyMiddleware(thunk, logger, middleware))
  )

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers').default
      store.replaceReducer(nextRootReducer)
    })
  }
  return store
}
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants