Search code examples
reactjsreact-routerreact-reduxreact-router-redux

Corrupted store of react-redux

I am looking for any suggestion to debug this issue.

Normally when my reactjs app starts, it initialises the state to the following

enter image description here

The CollectionData class is basically a class that consists of many properties of type immutable-js map. 

export class CollectionData extends Immutable.Record({ // eslint-disable-line new-cap
  idToFetching: new Immutable.Map(), // Map<Id, Bool>
  idToError: new Immutable.Map(), // Map<Id, Bool>
  idToEntity: new Immutable.Map(), // Map<Id, Entity>
...

However for reason, for a certain route, the state is initialised to this

enter image description here

I don't know how it is possible how the properties of CollectionData is changed to Symbol(react.element)

I would like to know what is the best way to debug initRoutes.

I am using these dependencies:

 "react": "^0.14.6",
"react-chartist": "^0.10.1",
"react-dom": "^0.14.6",
"react-intl": "2.0.0-rc-1",
"react-redux": "^4.4.5",
"react-router": "^1.0.3",
"redux": "^3.0.5",
"redux-router": "^1.0.0-beta7",
"redux-thunk": "^1.0.3",
"reselect": "^2.0.1",

EDIT:

When I expand the properties store and type: function Row(_ref2), I saw these attributes:

1) Store: validated: false

2) Row: arguments: TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context. at Function.remoteFunction (<anonymous>:3:14) at Object.InjectedScript.callFunctionOn (<anonymous>:124:124)

enter image description here

The store is basically messed up and cannot be inspected in the Redux Devtool (a chrome extension). I think it is related to this error

enter image description here

Solution

  • Turns out it is because there was an exception thrown by one of my components during mounting (In this case, a class called 'Row'). Remove the exception and the problem is gone.