Update to use configureStore

Author: michaelmior

package.json

@@ -8,6 +8,7 @@
   "bugs": "https://github.com/michaelmior/relational-playground/issues",
   "dependencies": {
     "@michaelmior/js-sql-parser": "^1.3.0",
+    "@reduxjs/toolkit": "^1.8.1",
     "@sentry/browser": "^6.18.2",
     "@sentry/cli": "^1.74.3",
     "@testing-library/jest-dom": "^5.16.4",

src/App.test.js

@@ -1,17 +1,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {MemoryRouter} from 'react-router';
-import {createStore} from 'redux';
+import {configureStore} from '@reduxjs/toolkit';
 import {Provider} from 'react-redux';
+import produce from 'immer';
 import App from './App';
 
 /** @test {App} */
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  const store = createStore(() => ({
+  const initialState = {
     relexp: {expr: {}},
     data: {sourceData: {}},
-  }));
+  };
+  const store = configureStore({
+    reducer: {
+      data: produce((state, action) => state, initialState),
+      relexp: produce((state, action) => state, initialState),
+    },
+    preloadedState: initialState,
+  });
   ReactDOM.render(
     <Provider store={store}>
       <MemoryRouter>

src/DataContainer.test.js

@@ -1,22 +1,29 @@
 import React from 'react';
 import {Provider} from 'react-redux';
 import {mount} from 'enzyme';
-import {createStore} from 'redux';
+import produce from 'immer';
+import {configureStore} from '@reduxjs/toolkit';
 
 import DataContainer from './DataContainer';
 import Table from './Table';
 
 describe('DataContainer', () => {
   /** @test {DataContainer} */
   it('displays a table with the current data', () => {
-    const mockStore = createStore((state) => state, {
+    const initialState = {
       data: {
         current: {
           name: 'foo',
           columns: ['bar', 'baz'],
           data: [{bar: 1, baz: 2}],
         },
       },
+    };
+    const mockStore = configureStore({
+      reducer: {
+        data: produce((state, action) => state, initialState),
+      },
+      preloadedState: initialState,
     });
     const wrapper = mount(
       <Provider store={mockStore}>

src/modules/index.js

@@ -1,16 +1,17 @@
 // @flow
-import {createStore, applyMiddleware, compose} from 'redux';
-import {routerMiddleware} from 'connected-react-router';
+import {configureStore} from '@reduxjs/toolkit';
+import {connectRouter, routerMiddleware} from 'connected-react-router';
 import thunk from 'redux-thunk';
 import {createBrowserHistory} from 'history';
-import createRootReducer from './modules';
+
+import data from './modules/data';
+import relexp from './modules/relexp';
 
 import type {BrowserHistory} from 'history';
 import type {Action, Store} from 'redux';
 
 export const history: BrowserHistory = createBrowserHistory();
 
-const initialState = {};
 const enhancers = [];
 const middleware = [thunk, routerMiddleware(history)];
 
@@ -23,12 +24,15 @@ if (process.env.NODE_ENV === 'development') {
   }
 }
 
-const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
+const store: Store<{}, Action<{}>> = configureStore({
+  reducer: {
+    router: connectRouter(history),
 
-const store: Store<{}, Action<{}>> = createStore(
-  createRootReducer(history),
-  initialState,
-  composedEnhancers
-);
+    data,
+    relexp,
+  },
+  middleware: middleware,
+  enhancers: enhancers,
+});
 
 export default store;

src/store.js

@@ -2557,6 +2557,16 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
+"@reduxjs/toolkit@^1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.1.tgz#94ee1981b8cf9227cda40163a04704a9544c9a9f"
+  integrity sha512-Q6mzbTpO9nOYRnkwpDlFOAbQnd3g7zj7CtHAZWz5SzE5lcV97Tf8f3SzOO8BoPOMYBFgfZaqTUZqgGu+a0+Fng==
+  dependencies:
+    immer "^9.0.7"
+    redux "^4.1.2"
+    redux-thunk "^2.4.1"
+    reselect "^4.1.5"
+
 "@rollup/plugin-node-resolve@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
@@ -9378,7 +9388,7 @@ immer@8.0.1:
   resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
   integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==
 
-immer@^9.0.12:
+immer@^9.0.12, immer@^9.0.7:
   version "9.0.12"
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.12.tgz#2d33ddf3ee1d247deab9d707ca472c8c942a0f20"
   integrity sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==
@@ -14758,7 +14768,7 @@ redux-thunk@^2.4.1:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
   integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
 
-redux@^4.0.0, redux@^4.2.0:
+redux@^4.0.0, redux@^4.1.2, redux@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
   integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
@@ -15018,6 +15028,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reselect@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.5.tgz#852c361247198da6756d07d9296c2b51eddb79f6"
+  integrity sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"