D3 and L-Systems with Redux and StateReflector

Joe Gregorio

This is D3 and L-Systems with live controls and Redux, but now state is reflected into the URL Fragment.

The syncing is two way, that is, changes to the state of the controls are reflected into the URL Fragment, and changes to the fragment are reflected into the state of the controls, so every change give you a permalink to that state, and browser history navigation works.

There are only two small changes from the previous code, the addition of a new action "REPLACE_ALL" that the store understands, and then the call to initialize StateReflector.

The StateReflector is extraced from this code from the Skia Infrastructure codebase. The URL Fragment will only contain information that's required, this is, if a value in the state is unchanged from the default or initial value, then that value won't appear in the URL Fragment.

The pairing with Redux makes this much nicer. In all of our (Skia Infra) current code we don't use Redux, and so for StateReflector to work it needs to monitor the internal state of the page which is does using a 100ms timer. While the overhead is very low, having a non-polling solution is obviously better.

The StateReflector code is also modified from the original so that it store the state in the URL Fragment, while the original code stores the state in the URL Query. It's probably worth making that a configuration option to stateReflector.

If StateReflector looks useful to anyone let me know in the comments and I'll stand up a repo and port the tests over too.

comments powered by Disqus