diff --git a/package.json b/package.json
index 98b5ee979a..ee1562d014 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@blueprintjs/popover2": "^2.0.0",
     "@blueprintjs/select": "^5.0.0",
     "@octokit/rest": "^20.0.0",
+    "@reduxjs/toolkit": "^1.9.7",
     "@sentry/browser": "^7.57.0",
     "@sourceacademy/sharedb-ace": "^2.0.2",
     "@sourceacademy/sling-client": "^0.1.0",
diff --git a/src/commons/application/actions/InterpreterActions.ts b/src/commons/application/actions/InterpreterActions.ts
index 95c48356ef..aabeb20789 100644
--- a/src/commons/application/actions/InterpreterActions.ts
+++ b/src/commons/application/actions/InterpreterActions.ts
@@ -1,5 +1,5 @@
+import { createAction } from '@reduxjs/toolkit';
 import { SourceError, Value } from 'js-slang/dist/types';
-import { action } from 'typesafe-actions';
 
 import { WorkspaceLocation } from '../../workspace/WorkspaceTypes';
 import {
@@ -16,41 +16,66 @@ import {
   HANDLE_CONSOLE_LOG
 } from '../types/InterpreterTypes';
 
-export const handleConsoleLog = (workspaceLocation: WorkspaceLocation, ...logString: string[]) =>
-  action(HANDLE_CONSOLE_LOG, { logString, workspaceLocation });
+export const handleConsoleLog = createAction(
+  HANDLE_CONSOLE_LOG,
+  (workspaceLocation: WorkspaceLocation, ...logString: string[]) => ({
+    payload: { logString, workspaceLocation }
+  })
+);
 
-export const evalInterpreterSuccess = (value: Value, workspaceLocation: WorkspaceLocation) =>
-  action(EVAL_INTERPRETER_SUCCESS, { type: 'result', value, workspaceLocation });
+export const evalInterpreterSuccess = createAction(
+  EVAL_INTERPRETER_SUCCESS,
+  (value: Value, workspaceLocation: WorkspaceLocation) => ({
+    payload: { type: 'result', value, workspaceLocation }
+  })
+);
 
-export const evalTestcaseSuccess = (
-  value: Value,
-  workspaceLocation: WorkspaceLocation,
-  index: number
-) => action(EVAL_TESTCASE_SUCCESS, { type: 'result', value, workspaceLocation, index });
+export const evalTestcaseSuccess = createAction(
+  EVAL_TESTCASE_SUCCESS,
+  (value: Value, workspaceLocation: WorkspaceLocation, index: number) => ({
+    payload: { type: 'result', value, workspaceLocation, index }
+  })
+);
 
-export const evalTestcaseFailure = (
-  value: Value,
-  workspaceLocation: WorkspaceLocation,
-  index: number
-) => action(EVAL_TESTCASE_FAILURE, { type: 'errors', value, workspaceLocation, index });
+export const evalTestcaseFailure = createAction(
+  EVAL_TESTCASE_FAILURE,
+  (value: Value, workspaceLocation: WorkspaceLocation, index: number) => ({
+    payload: { type: 'errors', value, workspaceLocation, index }
+  })
+);
 
-export const evalInterpreterError = (errors: SourceError[], workspaceLocation: WorkspaceLocation) =>
-  action(EVAL_INTERPRETER_ERROR, { type: 'errors', errors, workspaceLocation });
+export const evalInterpreterError = createAction(
+  EVAL_INTERPRETER_ERROR,
+  (errors: SourceError[], workspaceLocation: WorkspaceLocation) => ({
+    payload: { type: 'errors', errors, workspaceLocation }
+  })
+);
 
-export const beginInterruptExecution = (workspaceLocation: WorkspaceLocation) =>
-  action(BEGIN_INTERRUPT_EXECUTION, { workspaceLocation });
+export const beginInterruptExecution = createAction(
+  BEGIN_INTERRUPT_EXECUTION,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
 
-export const endInterruptExecution = (workspaceLocation: WorkspaceLocation) =>
-  action(END_INTERRUPT_EXECUTION, { workspaceLocation });
+export const endInterruptExecution = createAction(
+  END_INTERRUPT_EXECUTION,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
 
-export const beginDebuggerPause = (workspaceLocation: WorkspaceLocation) =>
-  action(BEGIN_DEBUG_PAUSE, { workspaceLocation });
+export const beginDebuggerPause = createAction(
+  BEGIN_DEBUG_PAUSE,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
 
-export const endDebuggerPause = (workspaceLocation: WorkspaceLocation) =>
-  action(END_DEBUG_PAUSE, { workspaceLocation });
+export const endDebuggerPause = createAction(
+  END_DEBUG_PAUSE,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
 
-export const debuggerResume = (workspaceLocation: WorkspaceLocation) =>
-  action(DEBUG_RESUME, { workspaceLocation });
+export const debuggerResume = createAction(
+  DEBUG_RESUME,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
 
-export const debuggerReset = (workspaceLocation: WorkspaceLocation) =>
-  action(DEBUG_RESET, { workspaceLocation });
+export const debuggerReset = createAction(DEBUG_RESET, (workspaceLocation: WorkspaceLocation) => ({
+  payload: { workspaceLocation }
+}));
diff --git a/src/commons/collabEditing/CollabEditingActions.ts b/src/commons/collabEditing/CollabEditingActions.ts
index f8a75beb55..5e906bc637 100644
--- a/src/commons/collabEditing/CollabEditingActions.ts
+++ b/src/commons/collabEditing/CollabEditingActions.ts
@@ -1,13 +1,14 @@
-import { action } from 'typesafe-actions'; // EDITING
+import { createAction } from '@reduxjs/toolkit';
 
 import { WorkspaceLocation } from '../workspace/WorkspaceTypes';
 import { SET_EDITOR_SESSION_ID, SET_SHAREDB_CONNECTED } from './CollabEditingTypes';
 
-export const setEditorSessionId = (workspaceLocation: WorkspaceLocation, editorSessionId: string) =>
-  action(SET_EDITOR_SESSION_ID, {
-    workspaceLocation,
-    editorSessionId
-  });
+export const setEditorSessionId = createAction(
+  SET_EDITOR_SESSION_ID,
+  (workspaceLocation: WorkspaceLocation, editorSessionId: string) => ({
+    payload: { workspaceLocation, editorSessionId }
+  })
+);
 
 /**
  * Sets ShareDB connection status.
@@ -15,5 +16,9 @@ export const setEditorSessionId = (workspaceLocation: WorkspaceLocation, editorS
  * @param workspaceLocation the workspace to be reset
  * @param connected whether we are connected to ShareDB
  */
-export const setSharedbConnected = (workspaceLocation: WorkspaceLocation, connected: boolean) =>
-  action(SET_SHAREDB_CONNECTED, { workspaceLocation, connected });
+export const setSharedbConnected = createAction(
+  SET_SHAREDB_CONNECTED,
+  (workspaceLocation: WorkspaceLocation, connected: boolean) => ({
+    payload: { workspaceLocation, connected }
+  })
+);
diff --git a/src/commons/fileSystem/FileSystemActions.ts b/src/commons/fileSystem/FileSystemActions.ts
index 5fc2560433..938b929bb0 100644
--- a/src/commons/fileSystem/FileSystemActions.ts
+++ b/src/commons/fileSystem/FileSystemActions.ts
@@ -1,7 +1,9 @@
+import { createAction } from '@reduxjs/toolkit';
 import { FSModule } from 'browserfs/dist/node/core/FS';
-import { action } from 'typesafe-actions';
 
 import { SET_IN_BROWSER_FILE_SYSTEM } from './FileSystemTypes';
 
-export const setInBrowserFileSystem = (inBrowserFileSystem: FSModule) =>
-  action(SET_IN_BROWSER_FILE_SYSTEM, { inBrowserFileSystem });
+export const setInBrowserFileSystem = createAction(
+  SET_IN_BROWSER_FILE_SYSTEM,
+  (inBrowserFileSystem: FSModule) => ({ payload: { inBrowserFileSystem } })
+);
diff --git a/src/commons/workspace/WorkspaceActions.ts b/src/commons/workspace/WorkspaceActions.ts
index 664382ab8a..d44890f0e7 100644
--- a/src/commons/workspace/WorkspaceActions.ts
+++ b/src/commons/workspace/WorkspaceActions.ts
@@ -1,6 +1,6 @@
+import { createAction } from '@reduxjs/toolkit';
 import { Context } from 'js-slang';
 import { Chapter, Variant } from 'js-slang/dist/types';
-import { action } from 'typesafe-actions';
 
 import { SET_IS_EDITOR_READONLY } from '../../features/sourceRecorder/sourcecast/SourcecastTypes';
 import { SALanguage } from '../application/ApplicationTypes';
@@ -75,51 +75,73 @@ import {
   WorkspaceState
 } from './WorkspaceTypes';
 
-export const setTokenCount = (workspaceLocation: WorkspaceLocation, tokenCount: number) =>
-  action(SET_TOKEN_COUNT, { workspaceLocation, tokenCount });
-
-export const browseReplHistoryDown = (workspaceLocation: WorkspaceLocation) =>
-  action(BROWSE_REPL_HISTORY_DOWN, { workspaceLocation });
+export const setTokenCount = createAction(
+  SET_TOKEN_COUNT,
+  (workspaceLocation: WorkspaceLocation, tokenCount: number) => ({
+    payload: { workspaceLocation, tokenCount }
+  })
+);
 
-export const browseReplHistoryUp = (workspaceLocation: WorkspaceLocation) =>
-  action(BROWSE_REPL_HISTORY_UP, { workspaceLocation });
+export const browseReplHistoryDown = createAction(
+  BROWSE_REPL_HISTORY_DOWN,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
 
-export const changeExternalLibrary = (newExternal: string, workspaceLocation: WorkspaceLocation) =>
-  action(CHANGE_EXTERNAL_LIBRARY, { newExternal, workspaceLocation });
+export const browseReplHistoryUp = createAction(
+  BROWSE_REPL_HISTORY_UP,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
 
-export const changeExecTime = (execTime: number, workspaceLocation: WorkspaceLocation) =>
-  action(CHANGE_EXEC_TIME, { execTime, workspaceLocation });
+export const changeExternalLibrary = createAction(
+  CHANGE_EXTERNAL_LIBRARY,
+  (newExternal: string, workspaceLocation: WorkspaceLocation) => ({
+    payload: { newExternal, workspaceLocation }
+  })
+);
 
-export const changeSideContentHeight = (height: number, workspaceLocation: WorkspaceLocation) =>
-  action(CHANGE_SIDE_CONTENT_HEIGHT, { height, workspaceLocation });
+export const changeExecTime = createAction(
+  CHANGE_EXEC_TIME,
+  (execTime: number, workspaceLocation: WorkspaceLocation) => ({
+    payload: { execTime, workspaceLocation }
+  })
+);
 
-export const changeStepLimit = (stepLimit: number, workspaceLocation: WorkspaceLocation) =>
-  action(CHANGE_STEP_LIMIT, { stepLimit, workspaceLocation });
+export const changeSideContentHeight = createAction(
+  CHANGE_SIDE_CONTENT_HEIGHT,
+  (height: number, workspaceLocation: WorkspaceLocation) => ({
+    payload: { height, workspaceLocation }
+  })
+);
 
-export const chapterSelect = (
-  chapter: Chapter,
-  variant: Variant,
-  workspaceLocation: WorkspaceLocation
-) =>
-  action(CHAPTER_SELECT, {
-    chapter,
-    variant,
-    workspaceLocation
-  });
+export const changeStepLimit = createAction(
+  CHANGE_STEP_LIMIT,
+  (stepLimit: number, workspaceLocation: WorkspaceLocation) => ({
+    payload: { stepLimit, workspaceLocation }
+  })
+);
 
-export const externalLibrarySelect = (
-  externalLibraryName: ExternalLibraryName,
-  workspaceLocation: WorkspaceLocation,
-  initialise?: boolean
-) =>
-  action(PLAYGROUND_EXTERNAL_SELECT, {
-    externalLibraryName,
-    workspaceLocation,
-    initialise: initialise || false
-  });
+export const chapterSelect = createAction(
+  CHAPTER_SELECT,
+  (chapter: Chapter, variant: Variant, workspaceLocation: WorkspaceLocation) => ({
+    payload: { chapter, variant, workspaceLocation }
+  })
+);
 
-export const toggleEditorAutorun = (workspaceLocation: WorkspaceLocation) =>
-  action(TOGGLE_EDITOR_AUTORUN, { workspaceLocation });
+export const externalLibrarySelect = createAction(
+  PLAYGROUND_EXTERNAL_SELECT,
+  (
+    externalLibraryName: ExternalLibraryName,
+    workspaceLocation: WorkspaceLocation,
+    initialise?: boolean
+  ) => ({
+    payload: { externalLibraryName, workspaceLocation, initialise: initialise || false }
+  })
+);
+
+export const toggleEditorAutorun = createAction(
+  TOGGLE_EDITOR_AUTORUN,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
 
 /**
  * Starts the process to clear the js-slang Context
@@ -134,25 +156,27 @@ export const toggleEditorAutorun = (workspaceLocation: WorkspaceLocation) =>
  *
  * @see Library in assessmentShape.ts
  */
-export const beginClearContext = (
-  workspaceLocation: WorkspaceLocation,
-  library: Library,
-  shouldInitLibrary: boolean
-) =>
-  action(BEGIN_CLEAR_CONTEXT, {
-    library,
-    workspaceLocation,
-    shouldInitLibrary
-  });
-
-export const clearReplInput = (workspaceLocation: WorkspaceLocation) =>
-  action(CLEAR_REPL_INPUT, { workspaceLocation });
-
-export const clearReplOutput = (workspaceLocation: WorkspaceLocation) =>
-  action(CLEAR_REPL_OUTPUT, { workspaceLocation });
-
-export const clearReplOutputLast = (workspaceLocation: WorkspaceLocation) =>
-  action(CLEAR_REPL_OUTPUT_LAST, { workspaceLocation });
+export const beginClearContext = createAction(
+  BEGIN_CLEAR_CONTEXT,
+  (workspaceLocation: WorkspaceLocation, library: Library, shouldInitLibrary: boolean) => ({
+    payload: { library, workspaceLocation, shouldInitLibrary }
+  })
+);
+
+export const clearReplInput = createAction(
+  CLEAR_REPL_INPUT,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
+
+export const clearReplOutput = createAction(
+  CLEAR_REPL_OUTPUT,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
+
+export const clearReplOutputLast = createAction(
+  CLEAR_REPL_OUTPUT_LAST,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
 
 /**
  * Finishes the process to clear the js-slang Context
@@ -166,145 +190,186 @@ export const clearReplOutputLast = (workspaceLocation: WorkspaceLocation) =>
  *
  * @see Library in assessmentShape.ts
  */
-export const endClearContext = (library: Library, workspaceLocation: WorkspaceLocation) =>
-  action(END_CLEAR_CONTEXT, {
-    library,
-    workspaceLocation
-  });
-
-export const evalEditor = (workspaceLocation: WorkspaceLocation) =>
-  action(EVAL_EDITOR, { workspaceLocation });
-
-export const evalRepl = (workspaceLocation: WorkspaceLocation) =>
-  action(EVAL_REPL, { workspaceLocation });
-
-export const evalTestcase = (workspaceLocation: WorkspaceLocation, testcaseId: number) =>
-  action(EVAL_TESTCASE, { workspaceLocation, testcaseId });
-
-export const runAllTestcases = (workspaceLocation: WorkspaceLocation) =>
-  action(EVAL_EDITOR_AND_TESTCASES, { workspaceLocation });
-
-export const enableTokenCounter = (workspaceLocation: WorkspaceLocation) =>
-  action(ENABLE_TOKEN_COUNTER, { workspaceLocation });
-
-export const disableTokenCounter = (workspaceLocation: WorkspaceLocation) =>
-  action(DISABLE_TOKEN_COUNTER, { workspaceLocation });
-
-export const toggleFolderMode = (workspaceLocation: WorkspaceLocation) =>
-  action(TOGGLE_FOLDER_MODE, { workspaceLocation });
-
-export const setFolderMode = (workspaceLocation: WorkspaceLocation, isFolderModeEnabled: boolean) =>
-  action(SET_FOLDER_MODE, { workspaceLocation, isFolderModeEnabled });
-
-export const updateActiveEditorTabIndex = (
-  workspaceLocation: WorkspaceLocation,
-  activeEditorTabIndex: number | null
-) => action(UPDATE_ACTIVE_EDITOR_TAB_INDEX, { workspaceLocation, activeEditorTabIndex });
-
-export const updateActiveEditorTab = (
-  workspaceLocation: WorkspaceLocation,
-  activeEditorTabOptions?: Partial<EditorTabState>
-) => action(UPDATE_ACTIVE_EDITOR_TAB, { workspaceLocation, activeEditorTabOptions });
-
-export const updateEditorValue = (
-  workspaceLocation: WorkspaceLocation,
-  editorTabIndex: number,
-  newEditorValue: string
-) => action(UPDATE_EDITOR_VALUE, { workspaceLocation, editorTabIndex, newEditorValue });
-
-export const setEditorBreakpoint = (
-  workspaceLocation: WorkspaceLocation,
-  editorTabIndex: number,
-  newBreakpoints: string[]
-) => action(UPDATE_EDITOR_BREAKPOINTS, { workspaceLocation, editorTabIndex, newBreakpoints });
-
-export const setEditorHighlightedLines = (
-  workspaceLocation: WorkspaceLocation,
-  editorTabIndex: number,
-  newHighlightedLines: HighlightedLines[]
-) =>
-  action(UPDATE_EDITOR_HIGHLIGHTED_LINES, {
-    workspaceLocation,
-    editorTabIndex,
-    newHighlightedLines
-  });
-
-export const setEditorHighlightedLinesControl = (
-  workspaceLocation: WorkspaceLocation,
-  editorTabIndex: number,
-  newHighlightedLines: HighlightedLines[]
-) =>
-  action(UPDATE_EDITOR_HIGHLIGHTED_LINES_CONTROL, {
-    workspaceLocation,
-    editorTabIndex,
-    newHighlightedLines
-  });
-
-export const moveCursor = (
-  workspaceLocation: WorkspaceLocation,
-  editorTabIndex: number,
-  newCursorPosition: Position
-) => action(MOVE_CURSOR, { workspaceLocation, editorTabIndex, newCursorPosition });
-
-export const addEditorTab = (
-  workspaceLocation: WorkspaceLocation,
-  filePath: string,
-  editorValue: string
-) => action(ADD_EDITOR_TAB, { workspaceLocation, filePath, editorValue });
-
-export const shiftEditorTab = (
-  workspaceLocation: WorkspaceLocation,
-  previousEditorTabIndex: number,
-  newEditorTabIndex: number
-) => action(SHIFT_EDITOR_TAB, { workspaceLocation, previousEditorTabIndex, newEditorTabIndex });
-
-export const removeEditorTab = (workspaceLocation: WorkspaceLocation, editorTabIndex: number) =>
-  action(REMOVE_EDITOR_TAB, { workspaceLocation, editorTabIndex });
-
-export const removeEditorTabForFile = (
-  workspaceLocation: WorkspaceLocation,
-  removedFilePath: string
-) => action(REMOVE_EDITOR_TAB_FOR_FILE, { workspaceLocation, removedFilePath });
-
-export const removeEditorTabsForDirectory = (
-  workspaceLocation: WorkspaceLocation,
-  removedDirectoryPath: string
-) => action(REMOVE_EDITOR_TABS_FOR_DIRECTORY, { workspaceLocation, removedDirectoryPath });
-
-export const renameEditorTabForFile = (
-  workspaceLocation: WorkspaceLocation,
-  oldFilePath: string,
-  newFilePath: string
-) => action(RENAME_EDITOR_TAB_FOR_FILE, { workspaceLocation, oldFilePath, newFilePath });
-
-export const renameEditorTabsForDirectory = (
-  workspaceLocation: WorkspaceLocation,
-  oldDirectoryPath: string,
-  newDirectoryPath: string
-) =>
-  action(RENAME_EDITOR_TABS_FOR_DIRECTORY, {
-    workspaceLocation,
-    oldDirectoryPath,
-    newDirectoryPath
-  });
-
-export const updateReplValue = (newReplValue: string, workspaceLocation: WorkspaceLocation) =>
-  action(UPDATE_REPL_VALUE, { newReplValue, workspaceLocation });
-
-export const sendReplInputToOutput = (newOutput: string, workspaceLocation: WorkspaceLocation) =>
-  action(SEND_REPL_INPUT_TO_OUTPUT, {
-    type: 'code',
-    workspaceLocation,
-    value: newOutput
-  });
-
-export const resetTestcase = (workspaceLocation: WorkspaceLocation, index: number) =>
-  action(RESET_TESTCASE, { workspaceLocation, index });
-
-export const navigateToDeclaration = (
-  workspaceLocation: WorkspaceLocation,
-  cursorPosition: Position
-) => action(NAV_DECLARATION, { workspaceLocation, cursorPosition });
+export const endClearContext = createAction(
+  END_CLEAR_CONTEXT,
+  (library: Library, workspaceLocation: WorkspaceLocation) => ({
+    payload: { library, workspaceLocation }
+  })
+);
+
+export const evalEditor = createAction(EVAL_EDITOR, (workspaceLocation: WorkspaceLocation) => ({
+  payload: { workspaceLocation }
+}));
+
+export const evalRepl = createAction(EVAL_REPL, (workspaceLocation: WorkspaceLocation) => ({
+  payload: { workspaceLocation }
+}));
+
+export const evalTestcase = createAction(
+  EVAL_TESTCASE,
+  (workspaceLocation: WorkspaceLocation, testcaseId: number) => ({
+    payload: { workspaceLocation, testcaseId }
+  })
+);
+
+export const runAllTestcases = createAction(
+  EVAL_EDITOR_AND_TESTCASES,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
+
+export const toggleFolderMode = createAction(
+  TOGGLE_FOLDER_MODE,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
+
+export const enableTokenCounter = createAction(
+  ENABLE_TOKEN_COUNTER,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
+
+export const disableTokenCounter = createAction(
+  DISABLE_TOKEN_COUNTER,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
+
+export const setFolderMode = createAction(
+  SET_FOLDER_MODE,
+  (workspaceLocation: WorkspaceLocation, isFolderModeEnabled: boolean) => ({
+    payload: { workspaceLocation, isFolderModeEnabled }
+  })
+);
+
+export const updateActiveEditorTabIndex = createAction(
+  UPDATE_ACTIVE_EDITOR_TAB_INDEX,
+  (workspaceLocation: WorkspaceLocation, activeEditorTabIndex: number | null) => ({
+    payload: { workspaceLocation, activeEditorTabIndex }
+  })
+);
+
+export const updateActiveEditorTab = createAction(
+  UPDATE_ACTIVE_EDITOR_TAB,
+  (workspaceLocation: WorkspaceLocation, activeEditorTabOptions?: Partial<EditorTabState>) => ({
+    payload: { workspaceLocation, activeEditorTabOptions }
+  })
+);
+
+export const updateEditorValue = createAction(
+  UPDATE_EDITOR_VALUE,
+  (workspaceLocation: WorkspaceLocation, editorTabIndex: number, newEditorValue: string) => ({
+    payload: { workspaceLocation, editorTabIndex, newEditorValue }
+  })
+);
+
+export const setEditorBreakpoint = createAction(
+  UPDATE_EDITOR_BREAKPOINTS,
+  (workspaceLocation: WorkspaceLocation, editorTabIndex: number, newBreakpoints: string[]) => ({
+    payload: { workspaceLocation, editorTabIndex, newBreakpoints }
+  })
+);
+
+export const setEditorHighlightedLines = createAction(
+  UPDATE_EDITOR_HIGHLIGHTED_LINES,
+  (
+    workspaceLocation: WorkspaceLocation,
+    editorTabIndex: number,
+    newHighlightedLines: HighlightedLines[]
+  ) => ({ payload: { workspaceLocation, editorTabIndex, newHighlightedLines } })
+);
+
+export const setEditorHighlightedLinesControl = createAction(
+  UPDATE_EDITOR_HIGHLIGHTED_LINES_CONTROL,
+  (
+    workspaceLocation: WorkspaceLocation,
+    editorTabIndex: number,
+    newHighlightedLines: HighlightedLines[]
+  ) => ({ payload: { workspaceLocation, editorTabIndex, newHighlightedLines } })
+);
+
+export const moveCursor = createAction(
+  MOVE_CURSOR,
+  (workspaceLocation: WorkspaceLocation, editorTabIndex: number, newCursorPosition: Position) => ({
+    payload: { workspaceLocation, editorTabIndex, newCursorPosition }
+  })
+);
+
+export const addEditorTab = createAction(
+  ADD_EDITOR_TAB,
+  (workspaceLocation: WorkspaceLocation, filePath: string, editorValue: string) => ({
+    payload: { workspaceLocation, filePath, editorValue }
+  })
+);
+
+export const shiftEditorTab = createAction(
+  SHIFT_EDITOR_TAB,
+  (
+    workspaceLocation: WorkspaceLocation,
+    previousEditorTabIndex: number,
+    newEditorTabIndex: number
+  ) => ({ payload: { workspaceLocation, previousEditorTabIndex, newEditorTabIndex } })
+);
+
+export const removeEditorTab = createAction(
+  REMOVE_EDITOR_TAB,
+  (workspaceLocation: WorkspaceLocation, editorTabIndex: number) => ({
+    payload: { workspaceLocation, editorTabIndex }
+  })
+);
+
+export const removeEditorTabForFile = createAction(
+  REMOVE_EDITOR_TAB_FOR_FILE,
+  (workspaceLocation: WorkspaceLocation, removedFilePath: string) => ({
+    payload: { workspaceLocation, removedFilePath }
+  })
+);
+
+export const removeEditorTabsForDirectory = createAction(
+  REMOVE_EDITOR_TABS_FOR_DIRECTORY,
+  (workspaceLocation: WorkspaceLocation, removedDirectoryPath: string) => ({
+    payload: { workspaceLocation, removedDirectoryPath }
+  })
+);
+
+export const renameEditorTabForFile = createAction(
+  RENAME_EDITOR_TAB_FOR_FILE,
+  (workspaceLocation: WorkspaceLocation, oldFilePath: string, newFilePath: string) => ({
+    payload: { workspaceLocation, oldFilePath, newFilePath }
+  })
+);
+
+export const renameEditorTabsForDirectory = createAction(
+  RENAME_EDITOR_TABS_FOR_DIRECTORY,
+  (workspaceLocation: WorkspaceLocation, oldDirectoryPath: string, newDirectoryPath: string) => ({
+    payload: { workspaceLocation, oldDirectoryPath, newDirectoryPath }
+  })
+);
+
+export const updateReplValue = createAction(
+  UPDATE_REPL_VALUE,
+  (newReplValue: string, workspaceLocation: WorkspaceLocation) => ({
+    payload: { newReplValue, workspaceLocation }
+  })
+);
+
+export const sendReplInputToOutput = createAction(
+  SEND_REPL_INPUT_TO_OUTPUT,
+  (newOutput: string, workspaceLocation: WorkspaceLocation) => ({
+    payload: { type: 'code', workspaceLocation, value: newOutput }
+  })
+);
+
+export const resetTestcase = createAction(
+  RESET_TESTCASE,
+  (workspaceLocation: WorkspaceLocation, index: number) => ({
+    payload: { workspaceLocation, index }
+  })
+);
+
+export const navigateToDeclaration = createAction(
+  NAV_DECLARATION,
+  (workspaceLocation: WorkspaceLocation, cursorPosition: Position) => ({
+    payload: { workspaceLocation, cursorPosition }
+  })
+);
 
 /**
  * Resets a workspace to its default properties.
@@ -315,115 +380,123 @@ export const navigateToDeclaration = (
  *   values. For example, one can use this to specify a particular
  *   editorValue.
  */
-export const resetWorkspace = (
-  workspaceLocation: WorkspaceLocation,
-  workspaceOptions?: Partial<WorkspaceState>
-) =>
-  action(RESET_WORKSPACE, {
-    workspaceLocation,
-    workspaceOptions
-  });
-
-export const updateWorkspace = (
-  workspaceLocation: WorkspaceLocation,
-  workspaceOptions?: Partial<WorkspaceState>
-) =>
-  action(UPDATE_WORKSPACE, {
-    workspaceLocation,
-    workspaceOptions
-  });
-
-export const setIsEditorReadonly = (
-  workspaceLocation: WorkspaceLocation,
-  isEditorReadonly: boolean
-) =>
-  action(SET_IS_EDITOR_READONLY, {
-    workspaceLocation,
-    isEditorReadonly: isEditorReadonly
-  });
-
-export const updateSubmissionsTableFilters = (filters: SubmissionsTableFilters) =>
-  action(UPDATE_SUBMISSIONS_TABLE_FILTERS, { filters });
-
-export const updateCurrentAssessmentId = (assessmentId: number, questionId: number) =>
-  action(UPDATE_CURRENT_ASSESSMENT_ID, {
-    assessmentId,
-    questionId
-  });
-
-export const updateCurrentSubmissionId = (submissionId: number, questionId: number) =>
-  action(UPDATE_CURRENT_SUBMISSION_ID, {
-    submissionId,
-    questionId
-  });
-
-export const updateHasUnsavedChanges = (
-  workspaceLocation: WorkspaceLocation,
-  hasUnsavedChanges: boolean
-) =>
-  action(UPDATE_HAS_UNSAVED_CHANGES, {
-    workspaceLocation,
-    hasUnsavedChanges
-  });
-
-export const changeSublanguage = (sublang: SALanguage) => action(CHANGE_SUBLANGUAGE, { sublang });
-
-export const updateSublanguage = (sublang: SALanguage) => action(UPDATE_SUBLANGUAGE, { sublang });
-
-export const promptAutocomplete = (
-  workspaceLocation: WorkspaceLocation,
-  row: number,
-  column: number,
-  callback: any // TODO: define a type for this
-) =>
-  action(PROMPT_AUTOCOMPLETE, {
-    workspaceLocation,
-    row,
-    column,
-    callback
-  });
-
-export const notifyProgramEvaluated = (
-  result: any,
-  lastDebuggerResult: any,
-  code: string,
-  context: Context,
-  workspaceLocation?: WorkspaceLocation
-) =>
-  action(NOTIFY_PROGRAM_EVALUATED, {
-    result,
-    lastDebuggerResult,
-    code,
-    context,
-    workspaceLocation
-  });
-
-export const toggleUsingSubst = (
-  usingSubst: boolean,
-  workspaceLocation: WorkspaceLocationsWithTools
-) => action(TOGGLE_USING_SUBST, { usingSubst, workspaceLocation });
-
-export const addHtmlConsoleError = (
-  errorMsg: string,
-  workspaceLocation: WorkspaceLocation,
-  storyEnv?: string
-) => action(ADD_HTML_CONSOLE_ERROR, { errorMsg, workspaceLocation, storyEnv });
-
-export const toggleUsingEnv = (usingEnv: boolean, workspaceLocation: WorkspaceLocationsWithTools) =>
-  action(TOGGLE_USING_ENV, { usingEnv, workspaceLocation });
-
-export const toggleUpdateEnv = (
-  updateEnv: boolean,
-  workspaceLocation: WorkspaceLocationsWithTools
-) => action(TOGGLE_UPDATE_ENV, { updateEnv, workspaceLocation });
-
-export const updateEnvSteps = (steps: number, workspaceLocation: WorkspaceLocation) =>
-  action(UPDATE_ENVSTEPS, { steps, workspaceLocation });
-
-export const updateEnvStepsTotal = (steps: number, workspaceLocation: WorkspaceLocation) =>
-  action(UPDATE_ENVSTEPSTOTAL, { steps, workspaceLocation });
-
-export const updateBreakpointSteps = (
-  breakpointSteps: number[],
-  workspaceLocation: WorkspaceLocation
-) => action(UPDATE_BREAKPOINTSTEPS, { breakpointSteps, workspaceLocation });
+export const resetWorkspace = createAction(
+  RESET_WORKSPACE,
+  (workspaceLocation: WorkspaceLocation, workspaceOptions?: Partial<WorkspaceState>) => ({
+    payload: { workspaceLocation, workspaceOptions }
+  })
+);
+
+export const updateWorkspace = createAction(
+  UPDATE_WORKSPACE,
+  (workspaceLocation: WorkspaceLocation, workspaceOptions?: Partial<WorkspaceState>) => ({
+    payload: { workspaceLocation, workspaceOptions }
+  })
+);
+
+export const setIsEditorReadonly = createAction(
+  SET_IS_EDITOR_READONLY,
+  (workspaceLocation: WorkspaceLocation, isEditorReadonly: boolean) => ({
+    payload: { workspaceLocation, isEditorReadonly }
+  })
+);
+
+export const updateSubmissionsTableFilters = createAction(
+  UPDATE_SUBMISSIONS_TABLE_FILTERS,
+  (filters: SubmissionsTableFilters) => ({ payload: { filters } })
+);
+
+export const updateCurrentAssessmentId = createAction(
+  UPDATE_CURRENT_ASSESSMENT_ID,
+  (assessmentId: number, questionId: number) => ({ payload: { assessmentId, questionId } })
+);
+
+export const updateCurrentSubmissionId = createAction(
+  UPDATE_CURRENT_SUBMISSION_ID,
+  (submissionId: number, questionId: number) => ({ payload: { submissionId, questionId } })
+);
+
+export const updateHasUnsavedChanges = createAction(
+  UPDATE_HAS_UNSAVED_CHANGES,
+  (workspaceLocation: WorkspaceLocation, hasUnsavedChanges: boolean) => ({
+    payload: { workspaceLocation, hasUnsavedChanges }
+  })
+);
+
+export const changeSublanguage = createAction(CHANGE_SUBLANGUAGE, (sublang: SALanguage) => ({
+  payload: { sublang }
+}));
+
+export const updateSublanguage = createAction(UPDATE_SUBLANGUAGE, (sublang: SALanguage) => ({
+  payload: { sublang }
+}));
+
+export const promptAutocomplete = createAction(
+  PROMPT_AUTOCOMPLETE,
+  (
+    workspaceLocation: WorkspaceLocation,
+    row: number,
+    column: number,
+    callback: any // TODO: define a type for this
+  ) => ({ payload: { workspaceLocation, row, column, callback } })
+);
+
+export const notifyProgramEvaluated = createAction(
+  NOTIFY_PROGRAM_EVALUATED,
+  (
+    result: any,
+    lastDebuggerResult: any,
+    code: string,
+    context: Context,
+    workspaceLocation?: WorkspaceLocation
+  ) => ({ payload: { result, lastDebuggerResult, code, context, workspaceLocation } })
+);
+
+export const toggleUsingSubst = createAction(
+  TOGGLE_USING_SUBST,
+  (usingSubst: boolean, workspaceLocation: WorkspaceLocationsWithTools) => ({
+    payload: { usingSubst, workspaceLocation }
+  })
+);
+
+export const addHtmlConsoleError = createAction(
+  ADD_HTML_CONSOLE_ERROR,
+  (errorMsg: string, workspaceLocation: WorkspaceLocation, storyEnv?: string) => ({
+    payload: { errorMsg, workspaceLocation, storyEnv }
+  })
+);
+
+export const toggleUsingEnv = createAction(
+  TOGGLE_USING_ENV,
+  (usingEnv: boolean, workspaceLocation: WorkspaceLocationsWithTools) => ({
+    payload: { usingEnv, workspaceLocation }
+  })
+);
+
+export const toggleUpdateEnv = createAction(
+  TOGGLE_UPDATE_ENV,
+  (updateEnv: boolean, workspaceLocation: WorkspaceLocationsWithTools) => ({
+    payload: { updateEnv, workspaceLocation }
+  })
+);
+
+export const updateEnvSteps = createAction(
+  UPDATE_ENVSTEPS,
+  (steps: number, workspaceLocation: WorkspaceLocation) => ({
+    payload: { steps, workspaceLocation }
+  })
+);
+
+export const updateEnvStepsTotal = createAction(
+  UPDATE_ENVSTEPSTOTAL,
+  (steps: number, workspaceLocation: WorkspaceLocation) => ({
+    payload: { steps, workspaceLocation }
+  })
+);
+
+export const updateBreakpointSteps = createAction(
+  UPDATE_BREAKPOINTSTEPS,
+  (breakpointSteps: number[], workspaceLocation: WorkspaceLocation) => ({
+    payload: { breakpointSteps, workspaceLocation }
+  })
+);
diff --git a/src/features/academy/AcademyActions.ts b/src/features/academy/AcademyActions.ts
index 83256f06e3..c3d36cefb1 100644
--- a/src/features/academy/AcademyActions.ts
+++ b/src/features/academy/AcademyActions.ts
@@ -1,7 +1,7 @@
+import { createAction } from '@reduxjs/toolkit';
 import { UpdateCourseConfiguration } from 'src/commons/application/types/SessionTypes';
 import { NameUsernameRole } from 'src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel';
 import { UsernameRoleGroup } from 'src/pages/academy/adminPanel/subcomponents/AddUserPanel';
-import { action } from 'typesafe-actions';
 
 import {
   ADD_NEW_STORIES_USERS_TO_COURSE,
@@ -9,11 +9,17 @@ import {
   CREATE_COURSE
 } from './AcademyTypes';
 
-export const createCourse = (courseConfig: UpdateCourseConfiguration) =>
-  action(CREATE_COURSE, courseConfig);
+export const createCourse = createAction(
+  CREATE_COURSE,
+  (courseConfig: UpdateCourseConfiguration) => ({ payload: courseConfig })
+);
 
-export const addNewUsersToCourse = (users: UsernameRoleGroup[], provider: string) =>
-  action(ADD_NEW_USERS_TO_COURSE, { users, provider });
+export const addNewUsersToCourse = createAction(
+  ADD_NEW_USERS_TO_COURSE,
+  (users: UsernameRoleGroup[], provider: string) => ({ payload: { users, provider } })
+);
 
-export const addNewStoriesUsersToCourse = (users: NameUsernameRole[], provider: string) =>
-  action(ADD_NEW_STORIES_USERS_TO_COURSE, { users, provider });
+export const addNewStoriesUsersToCourse = createAction(
+  ADD_NEW_STORIES_USERS_TO_COURSE,
+  (users: NameUsernameRole[], provider: string) => ({ payload: { users, provider } })
+);
diff --git a/src/features/groundControl/GroundControlActions.ts b/src/features/groundControl/GroundControlActions.ts
index ec19de4826..ecdc77aab7 100644
--- a/src/features/groundControl/GroundControlActions.ts
+++ b/src/features/groundControl/GroundControlActions.ts
@@ -1,4 +1,4 @@
-import { action } from 'typesafe-actions';
+import { createAction } from '@reduxjs/toolkit';
 
 import {
   CHANGE_DATE_ASSESSMENT,
@@ -7,13 +7,21 @@ import {
   UPLOAD_ASSESSMENT
 } from './GroundControlTypes';
 
-export const changeDateAssessment = (id: number, openAt: string, closeAt: string) =>
-  action(CHANGE_DATE_ASSESSMENT, { id, openAt, closeAt });
+export const changeDateAssessment = createAction(
+  CHANGE_DATE_ASSESSMENT,
+  (id: number, openAt: string, closeAt: string) => ({ payload: { id, openAt, closeAt } })
+);
 
-export const deleteAssessment = (id: number) => action(DELETE_ASSESSMENT, id);
+export const deleteAssessment = createAction(DELETE_ASSESSMENT, (id: number) => ({ payload: id }));
 
-export const publishAssessment = (togglePublishTo: boolean, id: number) =>
-  action(PUBLISH_ASSESSMENT, { id, togglePublishTo });
+export const publishAssessment = createAction(
+  PUBLISH_ASSESSMENT,
+  (togglePublishTo: boolean, id: number) => ({ payload: { id, togglePublishTo } })
+);
 
-export const uploadAssessment = (file: File, forceUpdate: boolean, assessmentConfigId: number) =>
-  action(UPLOAD_ASSESSMENT, { file, forceUpdate, assessmentConfigId });
+export const uploadAssessment = createAction(
+  UPLOAD_ASSESSMENT,
+  (file: File, forceUpdate: boolean, assessmentConfigId: number) => ({
+    payload: { file, forceUpdate, assessmentConfigId }
+  })
+);
diff --git a/src/features/sourceRecorder/SourceRecorderActions.ts b/src/features/sourceRecorder/SourceRecorderActions.ts
index c05ff21aa6..35870fe953 100644
--- a/src/features/sourceRecorder/SourceRecorderActions.ts
+++ b/src/features/sourceRecorder/SourceRecorderActions.ts
@@ -1,4 +1,4 @@
-import { action } from 'typesafe-actions';
+import { createAction } from '@reduxjs/toolkit';
 
 import { WorkspaceLocation } from '../../commons/workspace/WorkspaceTypes';
 import {
@@ -15,70 +15,71 @@ import {
   SET_SOURCECAST_PLAYBACK_STATUS
 } from './SourceRecorderTypes';
 
-export const saveSourcecastData = (
-  title: string,
-  description: string,
-  uid: string,
-  audio: Blob,
-  playbackData: PlaybackData,
-  workspaceLocation: WorkspaceLocation
-) =>
-  action(SAVE_SOURCECAST_DATA, {
-    title,
-    description,
-    uid,
-    audio,
-    audioUrl: window.URL.createObjectURL(audio),
-    playbackData,
-    workspaceLocation
-  });
+export const saveSourcecastData = createAction(
+  SAVE_SOURCECAST_DATA,
+  (
+    title: string,
+    description: string,
+    uid: string,
+    audio: Blob,
+    playbackData: PlaybackData,
+    workspaceLocation: WorkspaceLocation
+  ) => ({
+    payload: {
+      title,
+      description,
+      uid,
+      audio,
+      audioUrl: window.URL.createObjectURL(audio),
+      playbackData,
+      workspaceLocation
+    }
+  })
+);
 
-export const setCurrentPlayerTime = (playerTime: number, workspaceLocation: WorkspaceLocation) =>
-  action(SET_CURRENT_PLAYER_TIME, {
-    playerTime,
-    workspaceLocation
-  });
+export const setCurrentPlayerTime = createAction(
+  SET_CURRENT_PLAYER_TIME,
+  (playerTime: number, workspaceLocation: WorkspaceLocation) => ({
+    payload: { playerTime, workspaceLocation }
+  })
+);
 
-export const setCodeDeltasToApply = (deltas: CodeDelta[], workspaceLocation: WorkspaceLocation) =>
-  action(SET_CODE_DELTAS_TO_APPLY, {
-    deltas,
-    workspaceLocation
-  });
+export const setCodeDeltasToApply = createAction(
+  SET_CODE_DELTAS_TO_APPLY,
+  (deltas: CodeDelta[], workspaceLocation: WorkspaceLocation) => ({
+    payload: { deltas, workspaceLocation }
+  })
+);
 
-export const setInputToApply = (inputToApply: Input, workspaceLocation: WorkspaceLocation) =>
-  action(SET_INPUT_TO_APPLY, {
-    inputToApply,
-    workspaceLocation
-  });
+export const setInputToApply = createAction(
+  SET_INPUT_TO_APPLY,
+  (inputToApply: Input, workspaceLocation: WorkspaceLocation) => ({
+    payload: { inputToApply, workspaceLocation }
+  })
+);
 
-export const setSourcecastData = (
-  title: string,
-  description: string,
-  uid: string,
-  audioUrl: string,
-  playbackData: PlaybackData,
-  workspaceLocation: WorkspaceLocation
-) =>
-  action(SET_SOURCECAST_DATA, {
-    title,
-    description,
-    uid,
-    audioUrl,
-    playbackData,
-    workspaceLocation
-  });
+export const setSourcecastData = createAction(
+  SET_SOURCECAST_DATA,
+  (
+    title: string,
+    description: string,
+    uid: string,
+    audioUrl: string,
+    playbackData: PlaybackData,
+    workspaceLocation: WorkspaceLocation
+  ) => ({ payload: { title, description, uid, audioUrl, playbackData, workspaceLocation } })
+);
 
-export const setSourcecastDuration = (duration: number, workspaceLocation: WorkspaceLocation) =>
-  action(SET_SOURCECAST_PLAYBACK_DURATION, {
-    duration,
-    workspaceLocation
-  });
+export const setSourcecastDuration = createAction(
+  SET_SOURCECAST_PLAYBACK_DURATION,
+  (duration: number, workspaceLocation: WorkspaceLocation) => ({
+    payload: { duration, workspaceLocation }
+  })
+);
 
-export const setSourcecastStatus = (
-  playbackStatus: PlaybackStatus,
-  workspaceLocation: WorkspaceLocation
-) =>
-  action(SET_SOURCECAST_PLAYBACK_STATUS, {
-    playbackStatus,
-    workspaceLocation
-  });
+export const setSourcecastStatus = createAction(
+  SET_SOURCECAST_PLAYBACK_STATUS,
+  (playbackStatus: PlaybackStatus, workspaceLocation: WorkspaceLocation) => ({
+    payload: { playbackStatus, workspaceLocation }
+  })
+);
diff --git a/src/features/sourceRecorder/sourcecast/SourcecastActions.ts b/src/features/sourceRecorder/sourcecast/SourcecastActions.ts
index 59d5b6acdd..5b8920f412 100644
--- a/src/features/sourceRecorder/sourcecast/SourcecastActions.ts
+++ b/src/features/sourceRecorder/sourcecast/SourcecastActions.ts
@@ -1,19 +1,17 @@
-import { action } from 'typesafe-actions';
+import { createAction } from '@reduxjs/toolkit';
 
 import { WorkspaceLocation } from '../../../commons/workspace/WorkspaceTypes';
 import { SourcecastData } from '../SourceRecorderTypes';
 import { FETCH_SOURCECAST_INDEX, UPDATE_SOURCECAST_INDEX } from './SourcecastTypes';
 
-export const fetchSourcecastIndex = (workspaceLocation: WorkspaceLocation) =>
-  action(FETCH_SOURCECAST_INDEX, {
-    workspaceLocation
-  });
+export const fetchSourcecastIndex = createAction(
+  FETCH_SOURCECAST_INDEX,
+  (workspaceLocation: WorkspaceLocation) => ({ payload: { workspaceLocation } })
+);
 
-export const updateSourcecastIndex = (
-  index: SourcecastData[],
-  workspaceLocation: WorkspaceLocation
-) =>
-  action(UPDATE_SOURCECAST_INDEX, {
-    index,
-    workspaceLocation
-  });
+export const updateSourcecastIndex = createAction(
+  UPDATE_SOURCECAST_INDEX,
+  (index: SourcecastData[], workspaceLocation: WorkspaceLocation) => ({
+    payload: { index, workspaceLocation }
+  })
+);
diff --git a/src/pages/createStore.ts b/src/pages/createStore.ts
index c82bfcb947..f6edb1328d 100644
--- a/src/pages/createStore.ts
+++ b/src/pages/createStore.ts
@@ -1,8 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
 import { throttle } from 'lodash';
-import { applyMiddleware, compose, createStore as _createStore } from 'redux';
 import createSagaMiddleware from 'redux-saga';
 
-import { defaultState } from '../commons/application/ApplicationTypes';
+import { defaultState, OverallState } from '../commons/application/ApplicationTypes';
 import createRootReducer from '../commons/application/reducers/RootReducer';
 import MainSaga from '../commons/sagas/MainSaga';
 import { generateOctokitInstance } from '../commons/utils/GitHubPersistenceHelper';
@@ -13,19 +13,18 @@ export const store = createStore();
 export function createStore() {
   const sagaMiddleware = createSagaMiddleware();
   const middleware = [sagaMiddleware];
-
-  const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-    ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
-        serialize: true,
-        maxAge: 300
-      }) || compose
-    : compose;
-
   const initialStore = loadStore(loadStoredState()) || defaultState;
 
-  const enhancers = composeEnhancers(applyMiddleware(...middleware));
-
-  const createdStore = _createStore(createRootReducer(), initialStore as any, enhancers);
+  const createdStore = configureStore<OverallState>({
+    reducer: createRootReducer(),
+    // Fix for redux-saga type incompatibility
+    // See: https://github.com/reduxjs/redux-toolkit/issues/3950
+    middleware: middleware as any,
+    devTools: { serialize: true, maxAge: 300 },
+    // We already provide the generic type argument, so we put
+    // `as any` to prevent excessively long type inference
+    preloadedState: initialStore as any
+  });
   sagaMiddleware.run(MainSaga);
 
   createdStore.subscribe(
diff --git a/yarn.lock b/yarn.lock
index a3b21a42e6..eb11a58b41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2000,6 +2000,16 @@
   resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.2.1.tgz#9403f51c17cae37edf870c6bc0c81c1ece5ccef8"
   integrity sha512-1dgmkh+3so0+LlBWRhGA33ua4MYr7tUOj+a9Si28vUi0IUFNbff1T3sgpeDJI/LaC75bBYnQ0A3wXjn0OrRNBA==
 
+"@reduxjs/toolkit@^1.9.7":
+  version "1.9.7"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.7.tgz#7fc07c0b0ebec52043f8cb43510cf346405f78a6"
+  integrity sha512-t7v8ZPxhhKgOKtU+uyJT13lu4vL7az5aFi4IdoDs/eS548edn2M8Ik9h8fxgvMjGoAUVFSt6ZC1P5cWmQ014QQ==
+  dependencies:
+    immer "^9.0.21"
+    redux "^4.2.1"
+    redux-thunk "^2.4.2"
+    reselect "^4.1.8"
+
 "@remix-run/router@1.15.0":
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.0.tgz#461a952c2872dd82c8b2e9b74c4dfaff569123e2"
@@ -7278,6 +7288,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+immer@^9.0.21:
+  version "9.0.21"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
+  integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
+
 immer@^9.0.7:
   version "9.0.19"
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.19.tgz#67fb97310555690b5f9cd8380d38fc0aabb6b38b"
@@ -11247,6 +11262,11 @@ redux-saga@^1.2.3:
   dependencies:
     "@redux-saga/core" "^1.3.0"
 
+redux-thunk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
+  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
+
 redux@^4.0.0, redux@^4.0.5, redux@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
@@ -11413,6 +11433,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+reselect@^4.1.8:
+  version "4.1.8"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
+  integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
+
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"