Example without `next-redux-wrapper`

[kylemh]

I am using Next.js to create a SPA and wont be leveraging any Next.js lifecycle methods, meaning I don't have to maintain server/client store parity. I would just do it anyways, but next-redux-wrapper opts the application out of automatic static exports.

I also commented here so that I can help to circle back and update documentation on this matter on the other end.

[danielr18]

I think the most simple implementation would be something like this:

import { createStore } from 'redux'

function initStore() {
  // all store initialization logic
  return createStore();
}

export default function App({ Component, pageProps }) {
  const [store, setStore] = useState(initStore)

  useEffect(() => {
    /** 
    initialize the app after mount if initStore should behave different 
    in server and client, to avoid hydration issues.
    **/
    setStore(initStore());
  }, []);

  return (
    <Provider store={store}>
      <ConnectedRouter>
        <Component {...pageProps} />
      </ConnectedRouter>
    </Provider>
  )
}

[kylemh]

Hey @danielr18 still working in this area as I've run into a strange issue. If I've got a separation in my store initializer around if window is defined or not (if it's CSR or not), would I want to run:

  const routerMiddleware = createRouterMiddleware()
  const { asPath, pathname, query } = context.ctx || Router.router || {};
  let initialState
  if (asPath) {
    const url = format({ pathname, query })
    initialState = {
      router: initialRouterState(url, asPath)
    }
  }
  return createStore(rootReducer, initialState, applyMiddleware(routerMiddleware))

for both cases?

edit: No problem. I just wanted to confirm my thoughts.

[danielr18]

@kylemh Probably, you would want to have the same initial state in the server and client to prevent hydrate mismatches.

What's the issue you are seeing?

[Prof-isaac]

Hi @danielr18 I have issue with connected next router It affects all the push that have query params

[danielr18]

@Prof-isaac can you create a new issue and add more details?

[Prof-isaac]

@danielr18 thanks for your quick response. after wrapping my app with ConnectedRouter e.g

this router.push from next/router in my project gives me error, but when i remove the ConnectedRouter it will work properly router.push({ pathname: home/${productName}/${id}/view, query: { previousLabel } })

here is the error====================> Unhandled Runtime Error TypeError: url.startsWith is not a function

Source next-server\lib\router\router.ts (97:6) @ isLocalURL

95 | */ 96 | export function isLocalURL(url: string): boolean {

97 | if (url.startsWith('/')) return true | ^ 98 | try { 99 | // absolute urls can be local if they are on the same origin 100 | const locationOrigin = getLocationOrigin() Call Stack Object.instance. [as push] client\router.ts (165:13) Show collapsed frames