Merge pull request #432 from mlibrary/replace-createstore-with-config…

…urestore

Replace `createStore` with `configureStore`.

.github/PULL_REQUEST_TEMPLATE/dependency_updates_template.md

@@ -6,6 +6,7 @@ These dependencies have been updated to their latest versions:
 - `@emotion/react`
 - `@emotion/styled`
 - `@redux-devtools/extension`
+- `@reduxjs/toolkit`
 - `citeproc`
 - `classnames`
 - `connected-react-router`

package.json

@@ -20,6 +20,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@redux-devtools/extension": "^3.3.0",
+    "@reduxjs/toolkit": "^2.2.1",
     "citeproc": "^2.4.63",
     "classnames": "^2.5.1",
     "connected-react-router": "^6.9.3",

src/modules/a11y/index.js

@@ -1,10 +1,8 @@
-import a11yReducer from './reducer';
 import A11yLiveMessage from './components/A11yLiveMessage';
 import setDocumentTitle from './setDocumentTitle';
 import { setA11yMessage } from './actions';
 
 export {
-  a11yReducer,
   setA11yMessage,
   A11yLiveMessage,
   setDocumentTitle

src/modules/lists/index.js

@@ -1,19 +1,17 @@
-import listsReducer from './reducer';
-import GoToList from './components/GoToList';
-import AddToListButton from './components/AddToListButton';
-import ActionsList from './components/ActionsList';
 import ActionStatusMessage from './components/ActionStatusMessage';
+import ActionsList from './components/ActionsList';
+import AddToListButton from './components/AddToListButton';
+import GoToList from './components/GoToList';
 import List from './components/List';
 import isInList from './isInList.js';
 import prejudice from './prejudice.js';
 
 export {
-  GoToList,
-  List,
+  ActionStatusMessage,
+  ActionsList,
   AddToListButton,
-  listsReducer,
+  GoToList,
   isInList,
-  ActionsList,
-  prejudice,
-  ActionStatusMessage
+  List,
+  prejudice
 };

src/modules/profile/index.js

@@ -1,14 +1,13 @@
-import profileReducer from './reducer';
 import { addProfile } from './actions';
-import setupProfile from './setupProfile';
-import AuthenticationRequired from './components/AuthenticationRequired';
 import Authentication from './components/Authentication';
+import AuthenticationRequired from './components/AuthenticationRequired';
+import setupProfile from './setupProfile';
 import useIsAuthenticated from './use-is-authenticated';
+
 export {
-  profileReducer,
   addProfile,
-  setupProfile,
-  AuthenticationRequired,
   Authentication,
+  AuthenticationRequired,
+  setupProfile,
   useIsAuthenticated
 };

src/modules/specialists/index.js

@@ -1,9 +1,7 @@
 import { addSpecialists } from './actions';
 import Specialists from './components/Specialists';
-import specialistsReducer from './reducer';
 
 export {
   addSpecialists,
-  Specialists,
-  specialistsReducer
+  Specialists
 };

src/store.js

@@ -1,46 +1,44 @@
-import {
-  createStore,
-  combineReducers,
-  applyMiddleware
-} from 'redux';
-import { connectRouter, routerMiddleware } from 'connected-react-router';
-import { composeWithDevTools } from '@redux-devtools/extension';
+import { configureStore } from '@reduxjs/toolkit';
+import { SET_A11Y_MESSAGE } from './modules/a11y/actions';
+import { advancedReducer } from './modules/advanced';
+import { affiliationReducer } from './modules/affiliation';
+import { browseReducer } from './modules/browse';
 import { datastoresReducer } from './modules/datastores';
-import { searchReducer } from './modules/search';
-import { recordsReducer } from './modules/records';
 import { filtersReducer } from './modules/filters';
-import { advancedReducer } from './modules/advanced';
 import { institutionReducer } from './modules/institution';
-import { browseReducer } from './modules/browse';
-import { specialistsReducer } from './modules/specialists';
-import { listsReducer } from './modules/lists';
-import { a11yReducer } from './modules/a11y';
-import { profileReducer } from './modules/profile';
-import { affiliationReducer } from './modules/affiliation';
-
+import { ADD_PROFILE } from './modules/profile/actions';
+import { ADD_LIST } from './modules/lists/actions';
+import { recordsReducer } from './modules/records';
+import { connectRouter, routerMiddleware } from 'connected-react-router';
 import history from './history';
+import { searchReducer } from './modules/search';
+import { ADD_SPECIALISTS } from './modules/specialists/actions';
 
-const rootReducer = combineReducers({
-  router: connectRouter(history),
-  datastores: datastoresReducer,
-  records: recordsReducer,
-  search: searchReducer,
-  filters: filtersReducer,
-  advanced: advancedReducer,
-  institution: institutionReducer,
-  browse: browseReducer,
-  specialists: specialistsReducer,
-  lists: listsReducer,
-  a11y: a11yReducer,
-  profile: profileReducer,
-  affiliation: affiliationReducer
-});
-
-const middleware = [routerMiddleware(history)];
+const simpleReducer = (actionType, initialState = {}) => {
+  return (state = initialState, action) => {
+    return action.type === actionType ? action.payload : state;
+  };
+};
 
-const store = createStore(
-  rootReducer,
-  composeWithDevTools(applyMiddleware(...middleware))
-);
+const store = configureStore({
+  reducer: {
+    a11y: simpleReducer(SET_A11Y_MESSAGE, { message: '' }),
+    advanced: advancedReducer,
+    affiliation: affiliationReducer,
+    browse: browseReducer,
+    datastores: datastoresReducer,
+    filters: filtersReducer,
+    institution: institutionReducer,
+    lists: simpleReducer(ADD_LIST),
+    profile: simpleReducer(ADD_PROFILE),
+    records: recordsReducer,
+    router: connectRouter(history),
+    search: searchReducer,
+    specialists: simpleReducer(ADD_SPECIALISTS, [])
+  },
+  middleware: (getDefaultMiddleware) => {
+    return getDefaultMiddleware().concat(routerMiddleware(history));
+  }
+});
 
 export default store;