Is it possible for the state not to contain functions?

[ccapndave]

Current router.components and router.routes contain functions. This means that I can't serialize the state into JSON without getting a circular reference error. Is it possible to make the state serializable, or can I just ignore these two properties and they will get rebuilt or something?

[ccapndave]

Also the @@reduxReactRouter/replaceRoutes action has a ReactElement as its payload

[PAkerstrand]

Try using serialize-javascript for serialization. This module allows serialization of functions and RegExp:s. Now, on the client side you can't use JSON.parse, but you can instead inline the serialized "json" in a <script>-tag

[quirinpa]

@PAkerstrand @acdlite
but what if the serialized javascript is incompatible with client side? For example, i used to add:

<script>
window.__data = ${serialize(store.getState())}
</script>

To my html when rendering server-side but with the functions we're now getting there are references to react (_react2['default']) which are incompatible with the rest of my code. (i'm using webpack for client-side & node-babel for server-side code)

Edit: I'm sure i can make React an external and solve it that way but... Is there any other way to do it? Why should i even send router state down the wire?

[explorigin]

I would also like for actions to be serializable for an entirely different reason...persistence. If I can JSON.stringify it, I can store it in PouchDB.

[mjrussell]

Im actually very interested in exploring ways we could remove react components and functions from the store. Not only do people have issues with serialization but it also affects tools such as the redux-dev-tools extension.

As far as I can tell, including the children and routes in the store is useful only for replacing routes dynamically via an action-creator, something which I believe react-router does not currently offer. I wonder if there is a way that we could either accomplish the same thing without needing to store the routes or default to not storing the routes and optionally allow users to enable route hot-swapping. Im guessing most users aren't using route hot-swapping and would prefer the default to be a bit more "pure."

Best case would be to accomplish the hot-swapping via another method but Im not sure its possible

[Scarysize]

Totally agree with that. Though I would argue we postpone work on this until after the next release, as it isn´t a major bug/issue.

[hmeerlo]

I disagree that it isn't a major bug/issue. It makes it impossible for me to do proper server-sde rendering.

[mjrussell]

@hmeerlo unfortunately its quite difficult to store only "part" of the router state in redux. You esentially need the redux store to drive all of the router, or none of it at all.

react-router-redux (formerly redux-simple-router) goes the approach of only storing the location object which is always serializable. That approach comes with some caveats though, and has been the cause of a new revamped API proposal:
reactjs/react-router-redux#259

I did some playing with using React-Router 2's new render option but Im not sure its the most robust solution, See #232

[Scarysize]

I guess we can close this for now. react-router-redux is the way to go, if you want to serialize your state.