Store not up-to-date in a new tab on a specific route about connected-next-router HOT 14 CLOSED

Actually, I think it's better to not rely on isServer. We really only want to set the initial state if we are in getInitialProps, and asPath is only defined when configureStore is called from getInitialProps, so this code is better:

export const configureStore = (initialState = {}, { asPath }) => {
  const routerMiddleware = createRouterMiddleware()

  if (asPath) {
    initialState.router = initialRouterState(asPath)
  }

  const store = createStore(rootReducer, initialState, bindMiddleware([routerMiddleware]))
  return store
}

from connected-next-router.

Yes, first example was wrong as it leads to server and client rendering with different redux states, I've deleted it to avoid confusing other people.

I'm going to replace the code in the example, and close this issue.

from connected-next-router.

Ohh, yes, thanks for the heads up!

from connected-next-router.

Alright, I'm able to recreate this by installing next-redux-wrapper: 3.0.0-alpha.0.

I'm working now on a fix.

FYI: A minimal reproduction is code that I can run on my side to get the same output, e.g. a simple example showing the issue with https://codesandbox.io/

from connected-next-router.

Thank you @danielr18
Sorry for not making a reproduction, I am not very used to it.

from connected-next-router.

It was bit hard to debug, but the issue is that after v2.0.0, they recreate the store in the server and client (see vercel/next.js#4295 (review)) but if you mutate the initialState in the server, which happens when store is recreated but this time outside getInitialProps, so there's no asPath, Next.js would serialize the mutated initialState, which differs from what you returned in getInitialProps, making it a bit confusing.

The flow is something like this:

1 - Server: getInitialProps => initialState you expect (with the route you are on)
2 - Server: HOC contructor calls makeStore again with the initialState, asPath isn't defined, so router initial state defaults to /, this mutates initialState from step 1.
3 - Server: Next.js serializes the initialState object.
4 - Client: HOC contructor calls makeStore again with the initialState (that was mutated in HOC constructor) so it has not the same data that it had when you returned the object from getInitialProps.

from connected-next-router.

Are you using the initialRouterState helper?

from connected-next-router.

Yes @danielr18 Here is my store creator function:

export default (initialState = {}, options) => {
  if (options.isServer) {
    initialState.router = initialRouterState(options.asPath)
  }

  const store = createStore(combinedReducers, Immutable(initialState), enhancer)

  sagaMiddleware.run(rootSaga)
  return store
}

from connected-next-router.

Would you mind sharing a minimal reproduction so that I can help further?

It seems to work fine in the example in the repo:

from connected-next-router.

Redux devtools and address bar

Complete redux setup file

import { createRouterMiddleware, initialRouterState, routerReducer } from 'connected-next-router'
import { applyMiddleware, combineReducers, createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'
import { i18nState } from 'redux-i18n'
import createSagaMiddleware from 'redux-saga'
import Immutable from 'seamless-immutable'

import entities from './entities'
import rootSaga from './sagas'


const reducers = {
  i18nState,
  router: routerReducer,
}

Object.keys(entities)
  .forEach((key) => {
    reducers[key] = entities[key].reducer
  })

const routerMiddleware = createRouterMiddleware()
const sagaMiddleware = createSagaMiddleware()
const enhancer = composeWithDevTools(applyMiddleware(routerMiddleware, sagaMiddleware))
const combinedReducers = combineReducers(reducers)


export default (initialState = {}, options) => {
  if (options.isServer) {
    // eslint-disable-next-line
    initialState.router = initialRouterState(options.asPath)
  }

  const store = createStore(combinedReducers, Immutable(initialState), enhancer)

  sagaMiddleware.run(rootSaga)
  return store
}

export { sagaMiddleware as saga }

Usage of ConnectedRouter

from connected-next-router.

I get this when logging as following:
console.log('isServer', options.isServer, ', path:', options.asPath, ', routerState: ', initialState.router)

from connected-next-router.

Here is my temporary workaround

export const makeStore = (initialState = {}, options) => {
  if (options.isServer) {
    if (options.asPath) {
      routerState = initialRouterState(options.asPath)
    }
    // eslint-disable-next-line
    initialState.router = routerState
  }

  const store = createStore(combinedReducers, Immutable(initialState), enhancer)

  sagaMiddleware.run(rootSaga)
  return store
}

from connected-next-router.

Your workaround from #9 (comment) made that there was a state flicker during the render but the one from #9 (comment) seems to fix the problem for now

from connected-next-router.

Don't forget to update the Readme too :)

from connected-next-router.