Merge pull request #440 from charlielee/issue-398

Implement redux toolkit for actions

package.json

@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@ffmpeg-installer/ffmpeg": "1.1.0",
-    "@redux-devtools/extension": "^3.2.3",
+    "@reduxjs/toolkit": "^1.9.1",
     "classnames": "^2.3.1",
     "conf": "^10.0.3",
     "electron-store": "^8.0.1",
@@ -49,8 +49,6 @@
     "react-icons": "^4.3.1",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
-    "redux": "^4.2.0",
-    "redux-thunk": "^2.4.1",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

src/renderer/components/animator/ExportDirectory/ExportDirectory.tsx

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from "react-redux";
-import { changeWorkingDirectory } from "../../../redux/app/thunks";
+import { changeWorkingDirectory } from "../../../redux/thunks";
 import { RootState } from "../../../redux/store";
 import Button from "../../common/Button/Button";
 import InputGroup from "../../common/Input/InputGroup/InputGroup";

src/renderer/components/animator/PlaybackSpeedSelect/PlaybackSpeedSelect.tsx

@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
 import { PLAYBACK_SPEEDS } from "../../../../common/utils";
-import { setPlaybackSpeed } from "../../../redux/project/actions";
+import { setPlaybackSpeed } from "../../../redux/slices/projectSlice";
 import { RootState } from "../../../redux/store";
 import InputSelect from "../../common/Input/InputSelect/InputSelect";
 

src/renderer/components/common/AppListener/AppListener.tsx

@@ -6,7 +6,7 @@ import {
   fetchAndSetDeviceList,
   loadSavedPreferences,
   onRouteChange,
-} from "../../../redux/app/thunks";
+} from "../../../redux/thunks";
 import { RootState } from "../../../redux/store";
 import { handleOnCloseButtonClick } from "../../../services/appListener/AppListenerService";
 import { onDeviceChange } from "../../../services/imagingDevice/ImagingDevice";

src/renderer/components/modals/PreferencesModal/PreferencesModal.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { PageRoute } from "../../../../common/PageRoute";
-import { editUserPreferences } from "../../../redux/app/actions";
+import { editUserPreferences } from "../../../redux/slices/appSlice";
 import { RootState } from "../../../redux/store";
 import Button from "../../common/Button/Button";
 import Content from "../../common/Content/Content";

src/renderer/components/modals/StartupModal/StartupModal.tsx

@@ -1,10 +1,7 @@
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { Action } from "redux";
-import { ThunkDispatch } from "redux-thunk";
 import { PageRoute } from "../../../../common/PageRoute";
-import { changeWorkingDirectory } from "../../../redux/app/thunks";
-import { addTake } from "../../../redux/project/actions";
+import { changeWorkingDirectory } from "../../../redux/thunks";
 import { RootState } from "../../../redux/store";
 import { makeTake } from "../../../services/project/projectBuilder";
 import Button from "../../common/Button/Button";
@@ -25,6 +22,8 @@ import ToolbarItem, {
   ToolbarItemAlign,
 } from "../../common/ToolbarItem/ToolbarItem";
 import NewsFeed from "../NewsFeed/NewsFeed";
+import { addTake } from "../../../redux/slices/projectSlice";
+import { Action, ThunkDispatch } from "@reduxjs/toolkit";
 
 const StartupModal = (): JSX.Element => {
   const { workingDirectory } = useSelector(

src/renderer/index.tsx

@@ -4,7 +4,7 @@ import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
 import App from "./components/common/App/App";
-import store from "./redux/store";
+import { store } from "./redux/store";
 import "./styles/theme.css";
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion