Update routesMap dynamically

I was recently working on a webapp for work and started messing around with per-client routing (it’s a private webapp, SEO is not of concern). I currently have it implemented with slugs /:client/:thing but that was only after I tried wrapping the redux-first-router reducer to allow injecting new routes into the routesMap on the fly.

I was a bit disappointed to find that when I changed the routesMap in the redux store that change was not reflected by the middleware / enhancer. I had a brief poke through the code and it seems that this is due to the routesmap being passed into the enhancer when connectRoutes is called. I would assume it is possible for the enhancer to read the routesMap from the store instead.

So I suppose I am wondering if there would be any large issues if this was implemented. To my understanding it would change nothing in terms of the API (unless it had to be specifically enabled in the connectRoutes options). Certainly not a high priority feature but it would be nice to be able to define more solid routes for each client.

[faceyspacey]

Comin in a week or so. U gotta make the middleware respond to an action containing the new routes. As well as the reducer which also maintains a reference to it (but that is more standard).

It also may be possible to just update the reducer state and always read from state rather than closure. In a few places that might not be possible, but hopefully that’s not the case.

[faceyspacey]

ok, this is done. it’s in the @next dist-tag on NPM. get it like this:

yarn upgrade redux-first-router@next

here’s how you use it:

import { addRoutes } from 'redux-first-router'
import universal from 'react-universal-component'

const UniversalComponent = universal(props => import(`./${props.page}`), {
   onLoad: module => {
       const aThunk = addRoutes(module.newRoutes)
       store.dispatch(aThunk)
   } 
})

this is just an example using Universal. you can use any code splitting component/tools you want.

So essentially you have an action creator now to dispatch new routes received via code-splitting.

There’s one thing I’m noticing now that I’m using it with React Universal Component–onLoad doesn’t receive props, so a global store variable had to be imported and used, which is no good. I’ll have to add a 2nd props arg there so your redux connected component can pass dispatch. It should be:

onLoad: => (module, props) => props.dispatch(addRoutes(module.newRoutes))

I’ll make that tweak in RUC.

For now if you’re looking at this and interested, find a way to access store directly or if you’re using other code splitting tools, you know what to do.

Otherwise, i’m closing this issue. feel free to open any specific new Issues. Feel free to add some docs about this. 🚀