CODEWITHSUNDEEP
javascriptreactjsreact-routerredux
egidra
egidra

Reputation: 9087

Isomorphic react-router-redux syncHistory middleware

syncHistory from react-router-redux takes in an argument that is browserHistory from react-router. On the server, calling syncHistory(browserHistory) does not really work. I am trying to create a store with middleware:

const { syncHistory } from 'react-router-redux'
const { browserHistory } from 'react-router'
const { createStore, applyMiddleware } from 'redux'

const reduxRouterMiddleware = syncHistory(browserHistory)
const createStoreWithMiddleware = applyMiddleware(
  routerReduxMiddleware
)(createStore)

On the server, I get the following error:

    unsubscribeHistory = history.listen(function (location) {
                                ^

TypeError: Cannot read property 'listen' of undefined

Upvotes: 3

Views: 687

Answers (1)

GordyD
GordyD

Reputation: 5103

As you have observed browserHistory will not work on the server as it uses the History API that is built into the browser. On the server you have to substitute it for something like history/lib/createMemoryHistory, e.g.

import createHistory from 'history/lib/createMemoryHistory';

const reduxRouterMiddleware = syncHistory(createHistory);
...

See the React Router documentation for more information on history.

As of React Router 2, docs, createMemoryHistory is included as a part of the React Router. 

import createHistory from 'react-router/lib/createMemoryHistory';

Upvotes: 1

Related Questions