Set up some routing for React-Redux

[easoncxz]

I don't want to put everything on the same page.

Found this blogpost introducing a demo library with appropriate ideology (i.e. "all state is kept in the store"):

• https://www.freecodecamp.org/news/an-introduction-to-the-redux-first-routing-model-98926ebf53cb/

Also seeming legit:

• redux-router: this is the most legit option, it seems. (Update: lol get rekt, this is 4 years old and does not compile with the current history package.)
• connected-react-router: complicated API involving React Contexts from react-redux's Provider.

Testing protocol:

Given an app set up with redux-router,

• When a deep-link is visited, e.g. /home, then the UI should show that page. (Testing outbound info-flow: libraries -> browser, via some kind of effect)
• When some kind of push action is dispatched, the browser transitions to that page. (Testing inbound info-flow: browser -> libraries, via some kind of subscription)
• Whenever the back button is clicked, the "previous" page is shown, regardless of how we arrived at the "current" page (i.e. by clicking-dispatching, or by typing into the address bar).

Possibly relevant:

• blogpost: http://jamesknelson.com/simple-routing-redux-react/

~Maybe best to just use react-router directly first, and worry about managing the location state in Redux later.~

[easoncxz]

With some tweaking around with peer dependencies of connected-react-router, and sucking it up and using Provider from react-redux, I have things working:

It is decent, because I obtained the rendered route info from the Redux state:

<Switch>
  <Route exact path="/" render={app} />
  <Route
    exact
    path="/other"
    render={() => (
      <div>
        <p>Another path</p>
        <p>The current location is:</p>
        <pre>{pretty(store.getState().router.location)}</pre>
        <button onClick={() => store.dispatch(ConnRouter.push('/'))}>
          Go home
        </button>
      </div>
    )}
  />
</Switch>

The things that connected-react-router forces me to do with my top-level state/Model and action/Msg types are quite hideous, but hey at least it works:

type ModelAndRouter = Redux.CombinedState<{
  model: Model;
  router: ConnRouter.RouterState<unknown>;
}>;

type MsgOrRouter = Msg | ConnRouter.RouterAction<unknown>;

const hist = createHashHistory();

const store: Redux.Store<ModelAndRouter, MsgOrRouter> = Redux.createStore(
  Redux.combineReducers({
    model: reducer,
    router: ConnRouter.connectRouter(hist),
  }),
  undefined,
  Redux.compose(Redux.applyMiddleware(ConnRouter.routerMiddleware(hist))),
);

[easoncxz]

Further developments: I figured out how to get just the history package to do what I need. It's much simpler in terms of both concepts and APIs compared to the combination of:

• react-router
• react-redux
• connected-react-router

See docs for history here:

• https://github.com/ReactTraining/history/blob/v4/docs/GettingStarted.md

And my commit that implements this:

• 5bea352