From 542a0b97be67f617468b8c96b0dea824d52ee55b Mon Sep 17 00:00:00 2001 From: Tim DiLauro Date: Thu, 30 May 2024 11:34:22 -0400 Subject: [PATCH] Introduce React Toolkit. (#113) * Add Redux Toolkit. * Migrate Redux store setup to RTK. * Use React Toolkit imports (almost) everywhere. --- package-lock.json | 72 ++++++++++++++++++- package.json | 6 +- src/components/AccountPage.tsx | 2 +- src/components/BookCoverEditor.tsx | 2 +- src/components/BookDetailsContainer.tsx | 2 +- src/components/BookDetailsEditor.tsx | 2 +- src/components/ChangePasswordForm.tsx | 2 +- src/components/CirculationEvents.tsx | 2 +- src/components/Classifications.tsx | 2 +- src/components/Complaints.tsx | 2 +- src/components/ConfigPage.tsx | 2 +- src/components/ContextProvider.tsx | 2 +- src/components/CustomListPage.tsx | 2 +- src/components/CustomLists.tsx | 2 +- src/components/CustomListsForBook.tsx | 2 +- src/components/DashboardPage.tsx | 2 +- src/components/DiagnosticsTabContainer.tsx | 2 +- src/components/EditableConfigList.tsx | 2 +- src/components/Header.tsx | 2 +- src/components/LanePage.tsx | 2 +- src/components/Lanes.tsx | 2 +- src/components/ManagePatrons.tsx | 2 +- src/components/ManagePatronsForm.tsx | 2 +- src/components/ManagePatronsTabContainer.tsx | 2 +- src/components/QuicksightDashboard.tsx | 2 +- src/components/QuicksightDashboardPage.tsx | 2 +- src/components/ResetAdobeId.tsx | 2 +- src/components/SelfTests.tsx | 2 +- src/components/SelfTestsCategory.tsx | 2 +- src/components/SelfTestsTabContainer.tsx | 2 +- src/components/SetupPage.tsx | 2 +- src/components/TabContainer.tsx | 2 +- .../TroubleshootingCategoryPage.tsx | 2 +- src/components/TroubleshootingPage.tsx | 2 +- .../TroubleshootingTabContainer.tsx | 2 +- src/store.ts | 30 +++----- 36 files changed, 115 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index 306f456d6..48ce0b904 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "license": "Apache-2.0", "dependencies": { "@nypl/dgx-svg-icons": "0.3.4", + "@reduxjs/toolkit": "^2.2.5", "@tanstack/react-query": "^4.36.1", "@thepalaceproject/web-opds-client": "^1.0.1", "bootstrap": "^3.3.6", @@ -29,7 +30,7 @@ "react-dnd": "^14.0.5", "react-dnd-html5-backend": "^14.0.5", "react-dom": "^16.8.6", - "react-redux": "^7.1.0", + "react-redux": "^7.2.9", "react-router": "^3.2.0", "recharts": "^1.8.6", "redux": "^4.0.1", @@ -52,7 +53,8 @@ "@types/prop-types": "^15.7.3", "@types/react": "^16.14.6", "@types/react-dom": "^16.9.8", - "@types/react-redux": "^7.1.16", + "@types/react-redux": "^7.1.33", + "@types/react-router": "^3.0.28", "@types/recharts": "^1.8.28", "@types/redux-mock-store": "^1.0.3", "@typescript-eslint/eslint-plugin": "^5.46.0", @@ -1704,6 +1706,56 @@ "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz", "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==" }, + "node_modules/@reduxjs/toolkit": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.5.tgz", + "integrity": "sha512-aeFA/s5NCG7NoJe/MhmwREJxRkDs0ZaSqt0MxhWUrwCf1UQXpwR87RROJEql0uAkLI6U7snBOYOcKw83ew3FPg==", + "dependencies": { + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.1.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, + "node_modules/@reduxjs/toolkit/node_modules/immer": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz", + "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, + "node_modules/@reduxjs/toolkit/node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" + }, + "node_modules/@reduxjs/toolkit/node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "peerDependencies": { + "redux": "^5.0.0" + } + }, + "node_modules/@reduxjs/toolkit/node_modules/reselect": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.0.tgz", + "integrity": "sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==" + }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -2265,6 +2317,12 @@ "@types/node": "*" } }, + "node_modules/@types/history": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/@types/history/-/history-3.2.5.tgz", + "integrity": "sha512-TqWYI0mlqS5qhH8MHgJJs0RcgvvZLxkn0bi2qK07liZqP7M9rl1kpJ6TCAUo5Cp4vP5DObIqHcky0MWyyQojVQ==", + "dev": true + }, "node_modules/@types/hoist-non-react-statics": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", @@ -2491,6 +2549,16 @@ "redux": "^4.0.0" } }, + "node_modules/@types/react-router": { + "version": "3.0.28", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-3.0.28.tgz", + "integrity": "sha512-cf3V8fSBLAzmICC8l5qbnrJhdjF0ia8K0EZwL8IpJDBQN6ieHDdw8t1+9regufQxEVip1T4tCQRwhAmy26Zn2A==", + "dev": true, + "dependencies": { + "@types/history": "^3.2.5", + "@types/react": "*" + } + }, "node_modules/@types/recharts": { "version": "1.8.29", "resolved": "https://registry.npmjs.org/@types/recharts/-/recharts-1.8.29.tgz", diff --git a/package.json b/package.json index 1433c229d..780b07f8d 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ }, "dependencies": { "@nypl/dgx-svg-icons": "0.3.4", + "@reduxjs/toolkit": "^2.2.5", "@tanstack/react-query": "^4.36.1", "@thepalaceproject/web-opds-client": "^1.0.1", "bootstrap": "^3.3.6", @@ -57,7 +58,7 @@ "react-dnd": "^14.0.5", "react-dnd-html5-backend": "^14.0.5", "react-dom": "^16.8.6", - "react-redux": "^7.1.0", + "react-redux": "^7.2.9", "react-router": "^3.2.0", "recharts": "^1.8.6", "redux": "^4.0.1", @@ -80,7 +81,8 @@ "@types/prop-types": "^15.7.3", "@types/react": "^16.14.6", "@types/react-dom": "^16.9.8", - "@types/react-redux": "^7.1.16", + "@types/react-redux": "^7.1.33", + "@types/react-router": "^3.0.28", "@types/recharts": "^1.8.28", "@types/redux-mock-store": "^1.0.3", "@typescript-eslint/eslint-plugin": "^5.46.0", diff --git a/src/components/AccountPage.tsx b/src/components/AccountPage.tsx index 97df3c12b..24d048869 100644 --- a/src/components/AccountPage.tsx +++ b/src/components/AccountPage.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import ChangePasswordForm from "./ChangePasswordForm"; import { RootState } from "../store"; diff --git a/src/components/BookCoverEditor.tsx b/src/components/BookCoverEditor.tsx index ebb584e84..888b0296d 100644 --- a/src/components/BookCoverEditor.tsx +++ b/src/components/BookCoverEditor.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import editorAdapter from "../editorAdapter"; import DataFetcher from "@thepalaceproject/web-opds-client/lib/DataFetcher"; diff --git a/src/components/BookDetailsContainer.tsx b/src/components/BookDetailsContainer.tsx index 2623012cc..dd7616b9a 100644 --- a/src/components/BookDetailsContainer.tsx +++ b/src/components/BookDetailsContainer.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import BookDetailsTabContainer from "./BookDetailsTabContainer"; diff --git a/src/components/BookDetailsEditor.tsx b/src/components/BookDetailsEditor.tsx index d82d75633..50d90291d 100644 --- a/src/components/BookDetailsEditor.tsx +++ b/src/components/BookDetailsEditor.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import DataFetcher from "@thepalaceproject/web-opds-client/lib/DataFetcher"; import ActionCreator from "../actions"; diff --git a/src/components/ChangePasswordForm.tsx b/src/components/ChangePasswordForm.tsx index 57da39791..d2794a771 100644 --- a/src/components/ChangePasswordForm.tsx +++ b/src/components/ChangePasswordForm.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { FetchErrorData } from "@thepalaceproject/web-opds-client/lib/interfaces"; import { RootState } from "../store"; import { connect } from "react-redux"; diff --git a/src/components/CirculationEvents.tsx b/src/components/CirculationEvents.tsx index 308bbdacc..3f38ea339 100644 --- a/src/components/CirculationEvents.tsx +++ b/src/components/CirculationEvents.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import ActionCreator from "../actions"; import ErrorMessage from "./ErrorMessage"; diff --git a/src/components/Classifications.tsx b/src/components/Classifications.tsx index a5df428f8..bf7ed5498 100644 --- a/src/components/Classifications.tsx +++ b/src/components/Classifications.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import editorAdapter from "../editorAdapter"; import DataFetcher from "@thepalaceproject/web-opds-client/lib/DataFetcher"; diff --git a/src/components/Complaints.tsx b/src/components/Complaints.tsx index 8f3e86014..1e9eec505 100644 --- a/src/components/Complaints.tsx +++ b/src/components/Complaints.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import DataFetcher from "@thepalaceproject/web-opds-client/lib/DataFetcher"; import ActionCreator from "../actions"; diff --git a/src/components/ConfigPage.tsx b/src/components/ConfigPage.tsx index 9b3d46966..3365b24ad 100644 --- a/src/components/ConfigPage.tsx +++ b/src/components/ConfigPage.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import Header from "./Header"; import Footer from "./Footer"; diff --git a/src/components/ContextProvider.tsx b/src/components/ContextProvider.tsx index da5cfdce7..270af2dc1 100644 --- a/src/components/ContextProvider.tsx +++ b/src/components/ContextProvider.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import buildStore, { RootState } from "../store"; import { FeatureFlags, PathFor } from "../interfaces"; diff --git a/src/components/CustomListPage.tsx b/src/components/CustomListPage.tsx index d96244586..df5ff322e 100644 --- a/src/components/CustomListPage.tsx +++ b/src/components/CustomListPage.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import Header from "./Header"; import Footer from "./Footer"; diff --git a/src/components/CustomLists.tsx b/src/components/CustomLists.tsx index 4fe4047e8..c1cb3e843 100644 --- a/src/components/CustomLists.tsx +++ b/src/components/CustomLists.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-deprecated */ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import * as PropTypes from "prop-types"; import { RootState } from "../store"; diff --git a/src/components/CustomListsForBook.tsx b/src/components/CustomListsForBook.tsx index e8fd95b3d..394ead01d 100644 --- a/src/components/CustomListsForBook.tsx +++ b/src/components/CustomListsForBook.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import DataFetcher from "@thepalaceproject/web-opds-client/lib/DataFetcher"; import ActionCreator from "../actions"; diff --git a/src/components/DashboardPage.tsx b/src/components/DashboardPage.tsx index 7293e617f..1d7834f58 100644 --- a/src/components/DashboardPage.tsx +++ b/src/components/DashboardPage.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { RootState } from "../store"; import * as PropTypes from "prop-types"; import Header from "./Header"; diff --git a/src/components/DiagnosticsTabContainer.tsx b/src/components/DiagnosticsTabContainer.tsx index c116db2f7..12cd541f8 100644 --- a/src/components/DiagnosticsTabContainer.tsx +++ b/src/components/DiagnosticsTabContainer.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import ActionCreator from "../actions"; import { DiagnosticsData } from "../interfaces"; diff --git a/src/components/EditableConfigList.tsx b/src/components/EditableConfigList.tsx index a36aaa7b6..fcc6ec445 100644 --- a/src/components/EditableConfigList.tsx +++ b/src/components/EditableConfigList.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { FetchErrorData } from "@thepalaceproject/web-opds-client/lib/interfaces"; import { SettingData } from "../interfaces"; import { Alert } from "react-bootstrap"; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 0388b59cc..b5d14d3df 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,7 +1,7 @@ /* eslint-disable */ import * as React from "react"; import { connect } from "react-redux"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import { RootState } from "../store"; import ActionCreator from "../actions"; diff --git a/src/components/LanePage.tsx b/src/components/LanePage.tsx index 7aba906b1..27ffac96b 100644 --- a/src/components/LanePage.tsx +++ b/src/components/LanePage.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import Header from "./Header"; import Footer from "./Footer"; diff --git a/src/components/Lanes.tsx b/src/components/Lanes.tsx index 9e544c13d..f6dd1acf9 100644 --- a/src/components/Lanes.tsx +++ b/src/components/Lanes.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/no-deprecated */ import * as React from "react"; import { Link } from "react-router"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import { RootState } from "../store"; import ActionCreator from "../actions"; diff --git a/src/components/ManagePatrons.tsx b/src/components/ManagePatrons.tsx index 004327246..05857cec1 100644 --- a/src/components/ManagePatrons.tsx +++ b/src/components/ManagePatrons.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import * as PropTypes from "prop-types"; import { RootState } from "../store"; diff --git a/src/components/ManagePatronsForm.tsx b/src/components/ManagePatronsForm.tsx index 29732bc40..042011049 100644 --- a/src/components/ManagePatronsForm.tsx +++ b/src/components/ManagePatronsForm.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import { RootState } from "../store"; import ActionCreator from "../actions"; diff --git a/src/components/ManagePatronsTabContainer.tsx b/src/components/ManagePatronsTabContainer.tsx index b9c8f1d7a..08312d810 100644 --- a/src/components/ManagePatronsTabContainer.tsx +++ b/src/components/ManagePatronsTabContainer.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import * as PropTypes from "prop-types"; import { RootState } from "../store"; diff --git a/src/components/QuicksightDashboard.tsx b/src/components/QuicksightDashboard.tsx index 7667db348..3a99df623 100644 --- a/src/components/QuicksightDashboard.tsx +++ b/src/components/QuicksightDashboard.tsx @@ -4,7 +4,7 @@ import { LibrariesData, LibraryData, } from "../interfaces"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { RootState } from "../store"; import { connect } from "react-redux"; import ActionCreator from "../actions"; diff --git a/src/components/QuicksightDashboardPage.tsx b/src/components/QuicksightDashboardPage.tsx index 32054933d..b36c37f5d 100644 --- a/src/components/QuicksightDashboardPage.tsx +++ b/src/components/QuicksightDashboardPage.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { RootState } from "../store"; import * as PropTypes from "prop-types"; import Header from "./Header"; diff --git a/src/components/ResetAdobeId.tsx b/src/components/ResetAdobeId.tsx index 6a167b8f7..f614f308b 100644 --- a/src/components/ResetAdobeId.tsx +++ b/src/components/ResetAdobeId.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import { RootState } from "../store"; import ActionCreator from "../actions"; diff --git a/src/components/SelfTests.tsx b/src/components/SelfTests.tsx index 87fad49b9..639525709 100644 --- a/src/components/SelfTests.tsx +++ b/src/components/SelfTests.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-deprecated */ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import { RootState } from "../store"; import ActionCreator from "../actions"; diff --git a/src/components/SelfTestsCategory.tsx b/src/components/SelfTestsCategory.tsx index 72bed4c91..fd4ea6044 100644 --- a/src/components/SelfTestsCategory.tsx +++ b/src/components/SelfTestsCategory.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { RootState } from "../store"; import SelfTests from "./SelfTests"; import { diff --git a/src/components/SelfTestsTabContainer.tsx b/src/components/SelfTestsTabContainer.tsx index 86eb395d8..9d34056de 100644 --- a/src/components/SelfTestsTabContainer.tsx +++ b/src/components/SelfTestsTabContainer.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/no-empty-interface */ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import { connect } from "react-redux"; import ActionCreator from "../actions"; import { CollectionsData, PatronAuthServicesData } from "../interfaces"; diff --git a/src/components/SetupPage.tsx b/src/components/SetupPage.tsx index 9bcc4ab19..225d6c10b 100644 --- a/src/components/SetupPage.tsx +++ b/src/components/SetupPage.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import IndividualAdmins from "./IndividualAdmins"; import { RootState } from "../store"; diff --git a/src/components/TabContainer.tsx b/src/components/TabContainer.tsx index f800bd192..e5b3fff02 100644 --- a/src/components/TabContainer.tsx +++ b/src/components/TabContainer.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import { Navigate, PathFor } from "../interfaces"; import { RootState } from "../store"; diff --git a/src/components/TroubleshootingCategoryPage.tsx b/src/components/TroubleshootingCategoryPage.tsx index 795ebd681..fb5b782d1 100644 --- a/src/components/TroubleshootingCategoryPage.tsx +++ b/src/components/TroubleshootingCategoryPage.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import { RootState } from "../store"; import DiagnosticsTabContainer from "./DiagnosticsTabContainer"; diff --git a/src/components/TroubleshootingPage.tsx b/src/components/TroubleshootingPage.tsx index fc58c9dcd..84473d954 100644 --- a/src/components/TroubleshootingPage.tsx +++ b/src/components/TroubleshootingPage.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import Header from "./Header"; import Footer from "./Footer"; diff --git a/src/components/TroubleshootingTabContainer.tsx b/src/components/TroubleshootingTabContainer.tsx index e240bad8c..f4f73a3ff 100644 --- a/src/components/TroubleshootingTabContainer.tsx +++ b/src/components/TroubleshootingTabContainer.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Store } from "redux"; +import { Store } from "@reduxjs/toolkit"; import * as PropTypes from "prop-types"; import { State } from "../reducers/index"; import { diff --git a/src/store.ts b/src/store.ts index 3afff2438..870069b61 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,13 +1,5 @@ -import { - compose, - createStore, - combineReducers, - applyMiddleware, - Store, - Reducer, -} from "redux"; +import { configureStore, Store } from "@reduxjs/toolkit"; -import thunk from "redux-thunk"; import catalogReducers from "@thepalaceproject/web-opds-client/lib/reducers/index"; import { State as CatalogState } from "@thepalaceproject/web-opds-client/lib/state"; import editorReducers, { State as EditorState } from "./reducers/index"; @@ -17,20 +9,14 @@ export interface RootState { catalog: CatalogState; } -export const reducers: Reducer = combineReducers({ - editor: editorReducers, - catalog: catalogReducers, -}); - -const composeEnhancers = - window["__REDUX_DEVTOOLS_EXTENSION_COMPOSE__"] || compose; - /** Build a redux store with reducers specific to the admin interface as well as reducers from web-opds-client. */ export default function buildStore(initialState?: RootState): Store { - return createStore( - reducers, - initialState, - composeEnhancers(applyMiddleware(thunk)) - ); + return configureStore({ + reducer: { + editor: editorReducers, + catalog: catalogReducers, + }, + preloadedState: initialState, + }); }