Simplified redux setup

.storybook/preview.js

@@ -4,7 +4,6 @@ import { createGlobalStyle } from 'styled-components'
 
 import '../src/client/components'
 import DataHubProvider from '../src/client/provider'
-import { store, history, sagaMiddleware } from '../src/client/middleware'
 import taskStoriesTasks from '../src/client/components/Task/__stories__/tasks.js'
 import typeaheadTasks from '../src/client/components/Typeahead/tasks.js'
 import contactTasks from '../src/client/components/Resource/__stories__/tasks.js'
@@ -25,9 +24,6 @@ export const decorators = [
     <>
       <GlobalStyle />
       <DataHubProvider
-        sagaMiddleware={sagaMiddleware}
-        history={history}
-        store={store}
         tasks={{
           ...taskStoriesTasks,
           ...contactTasks,

src/client/index.jsx

@@ -47,8 +47,6 @@ import ErrorFallback from './components/ErrorFallback'
 
 import { tasks } from './tasks'
 
-import { store, history, sagaMiddleware } from './middleware'
-
 function parseProps(domNode) {
   return 'props' in domNode.dataset ? JSON.parse(domNode.dataset.props) : {}
 }
@@ -96,12 +94,7 @@ function App() {
       FallbackComponent={ErrorFallback}
       onError={(error) => ReactSentry.captureException(error)}
     >
-      <Provider
-        sagaMiddleware={sagaMiddleware}
-        history={history}
-        store={store}
-        tasks={tasks}
-      >
+      <Provider tasks={tasks}>
         <Mount selector="#data-hub-header">
           {(props) => <DataHubHeaderWrapper {...props} />}
         </Mount>

src/client/provider.jsx

@@ -1,9 +1,49 @@
 import React from 'react'
 import _ from 'lodash'
-import { ConnectedRouter } from 'connected-react-router'
+import {
+  ConnectedRouter,
+  connectRouter,
+  routerMiddleware,
+} from 'connected-react-router'
+import { configureStore } from '@reduxjs/toolkit'
 import { Provider } from 'react-redux'
+import createSagaMiddleware from 'redux-saga'
+import { createBrowserHistory } from 'history'
 
 import rootSaga from './root-saga'
+import { reducers } from './reducers'
+
+const preloadedState = {
+  // Extract data provided throught the nunjucks "react-slot" macro
+  ...JSON.parse(document.getElementById('react-app')?.dataset.props || '{}'),
+  referrerUrl: window.document.referrer,
+}
+
+const sagaMiddleware = createSagaMiddleware()
+
+const history = createBrowserHistory({
+  // The baseURI is set to the <base/> tag by the spaFallbackSpread
+  // middleware, which should be applied to each Express route where
+  // react-router is expected to be used.
+  basename: encodeURIComponent(new URL(document.baseURI).pathname),
+})
+
+const store = configureStore({
+  devTools: process.env.NODE_ENV === 'development',
+  middleware: [sagaMiddleware, routerMiddleware(history)],
+  preloadedState,
+  reducer: {
+    // This is to prevent the silly "Unexpected key ..." error thrown by combineReducers
+    ..._.mapValues(
+      preloadedState,
+      () =>
+        (state = null) =>
+          state
+    ),
+    ...reducers,
+    router: connectRouter(history),
+  },
+})
 
 const runMiddlewareOnce = _.once((tasks, sagaMiddleware) =>
   sagaMiddleware.run(rootSaga(tasks))
@@ -13,8 +53,9 @@ const runMiddlewareOnce = _.once((tasks, sagaMiddleware) =>
  * Provides state management and routing infrastructure required by the
  * stateful/routed components.
  * @param {Object} props
- * @param {Object} props.tasks - A map of _task_ names to _tasks_, if required
- * by the wrapped components.
+ * @param {Collection<string, (payload: any, id: string) => Promise<any>>} props.tasks -
+ * A map of _task_ names to _tasks_, if required by the wrapped components.
+ * @param {React.ReactNode} props.children - Children to which the context will be provided
  * @example
  * import ReferralList from 'components/ReferralList'
  * import dummyReferralListTask from 'components/ReferralList/task/dummy'
@@ -25,13 +66,7 @@ const runMiddlewareOnce = _.once((tasks, sagaMiddleware) =>
  *    <ReferralList id="foo"/>
  * </DataHubProvider>
  */
-const DataHubProvider = ({
-  tasks,
-  store,
-  history,
-  sagaMiddleware,
-  children,
-}) => {
+const DataHubProvider = ({ tasks, children }) => {
   runMiddlewareOnce(tasks, sagaMiddleware)
 
   return (