React Redux Router POC

router.tsx

import * as React from 'react';
import { SFC } from 'react';
import { useRedux } from '~/store';
import { currentRoute, Routes } from '~/stores/routing';

import { Campaign } from './pages/Campaign';
import { Dashboard } from './pages/Dashboard';

export interface RouterProps {}

/**
 * @render react
 * @name Router
 * @example
 * <Router text="Hello World" />
 */
export const Router: SFC<RouterProps> = ({}) => {
  const [route] = useRedux(currentRoute);

  // Route from store
  switch (route.route) {
    case Routes.CAMPAIGN:
      return <Campaign {...route.params} />;
    case Routes.DASHBOARD:
      return <Dashboard />;
    default:
      return <div>Unknown Route</div>;
  }
};

store.ts

export enum Routes {
  DASHBOARD,
  CAMPAIGN,
  PROSPECTS,
}

interface Route<R extends Routes, T = unknown> {
  route: R;
  params?: T;
}

type RouteP<R extends Routes, T> = Required<Route<R, T>>

type DashboardRoute = Route<Routes.DASHBOARD>;
type CampaignRoute = RouteP<Routes.CAMPAIGN, { campaignId: number }>;

export type AccessibleRoutes = DashboardRoute | CampaignRoute;

export interface RouterStore {
  currentRoute: AccessibleRoutes;
}

export const ROUTER_STORE_KEY = 'ROUTER';

export const INIT_ROUTER_STORE: RouterStore = {
  currentRoute: { route: Routes.DASHBOARD, params: {} },
};