Install Redux Toolkit

Author: shepmaster

ui/frontend/actions.ts

@@ -1,5 +1,5 @@
 import fetch from 'isomorphic-fetch';
-import { ThunkAction as ReduxThunkAction } from 'redux-thunk';
+import { ThunkAction as ReduxThunkAction } from '@reduxjs/toolkit';
 import { z } from 'zod';
 
 import {

ui/frontend/configureStore.ts

@@ -1,13 +1,14 @@
 import { merge } from 'lodash-es';
-import { applyMiddleware, compose, createStore } from 'redux';
 import { useDispatch } from 'react-redux';
-import thunk, { ThunkDispatch } from 'redux-thunk';
+import { configureStore as reduxConfigureStore } from '@reduxjs/toolkit';
+import { produce } from 'immer';
+import type {} from 'redux-thunk/extend-redux';
 
-import { Action, initializeApplication } from './actions';
+import { initializeApplication } from './actions';
 import initializeLocalStorage from './local_storage';
 import initializeSessionStorage from './session_storage';
-import playgroundApp, { State } from './reducers';
 import { websocketMiddleware } from './websocketMiddleware';
+import reducer from './reducers';
 
 export default function configureStore(window: Window) {
   const baseUrl = new URL('/', window.location.href).href;
@@ -18,22 +19,23 @@ export default function configureStore(window: Window) {
       baseUrl,
     },
   };
-  const initialAppState = playgroundApp(undefined, initializeApplication());
+  const initialAppState = reducer(undefined, initializeApplication());
 
   const localStorage = initializeLocalStorage();
   const sessionStorage = initializeSessionStorage();
 
-  const initialState = merge(
+  const preloadedState = produce(initialAppState, (initialAppState) => merge(
     initialAppState,
     initialGlobalState,
     localStorage.initialState,
     sessionStorage.initialState,
-  );
+  ));
 
-  const middlewares = applyMiddleware<ThunkDispatch<State, {}, Action>, {}>(thunk, websocket);
-  const composeEnhancers: typeof compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-  const enhancers = composeEnhancers(middlewares);
-  const store = createStore(playgroundApp, initialState, enhancers);
+  const store = reduxConfigureStore({
+    reducer,
+    preloadedState,
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(websocket),
+  })
 
   store.subscribe(() => {
     const state = store.getState();

ui/frontend/declarations.d.ts

@@ -17,7 +17,6 @@ declare const ACE_KEYBINDINGS: string[];
 declare const ACE_THEMES: string[];
 
 interface Window {
-  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any;
   rustPlayground: {
     setCode(code: string): void;
     disableSyncChangesToStorage(): void;

ui/frontend/package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "@floating-ui/react": "^0.22.2",
+    "@reduxjs/toolkit": "^1.8.5",
     "ace-builds": "^1.4.4",
     "common-tags": "^1.8.0",
     "core-js": "^3.1.3",
@@ -22,10 +23,7 @@
     "react-prism": "^4.0.0",
     "react-redux": "^8.0.2",
     "react-shadow": "^20.0.0",
-    "redux": "^4.0.0",
-    "redux-thunk": "^2.1.0",
     "regenerator-runtime": "^0.13.2",
-    "reselect": "^4.0.0",
     "route-parser": "^0.0.5",
     "split-grid": "^1.0.9",
     "suspend-react": "^0.0.9",

ui/frontend/reducers/index.ts

@@ -1,4 +1,4 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from '@reduxjs/toolkit';
 
 import browser from './browser';
 import code from './code';

ui/frontend/reducers/output/index.ts

@@ -1,4 +1,4 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from '@reduxjs/toolkit';
 
 import assembly from './assembly';
 import clippy from './clippy';

ui/frontend/selectors/index.ts

@@ -1,5 +1,5 @@
 import { source } from 'common-tags';
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { State } from '../reducers';
 import {

ui/frontend/uss-router/index.ts

@@ -1,7 +1,6 @@
 import { isEqual } from 'lodash-es';
-import { createStore, Reducer, Store, Action, PreloadedState } from 'redux';
+import { configureStore, CombinedState, ThunkAction, Reducer, Store, Action, PreloadedState } from '@reduxjs/toolkit';
 import { BrowserHistory, Location, Path } from 'history';
-import { ThunkAction } from 'redux-thunk';
 
 export type PlainOrThunk<St, A extends Action<any>> = A | ThunkAction<void, St, {}, A>;
 
@@ -68,9 +67,15 @@ export function createRouter<St, SubSt, A extends Action<any>>({
   return {
     provisionalLocation: (makeAction: () => A) => {
       const state = store.getState();
-      // This is a hack -- we know that our fully-constructed state is
-      // valid as a "preloaded" state for a brand new store!
-      const tempStore = createStore(reducer, state as PreloadedState<St>);
+
+      const tempStore = configureStore({
+        reducer,
+        // This is a hack -- we know that our fully-constructed state is
+        // valid as a "preloaded" state for a brand new store!
+        preloadedState: state as PreloadedState<CombinedState<St>>,
+        devTools: false,
+      });
+
       const action = makeAction();
       tempStore.dispatch(action);
       const maybeState = tempStore.getState();

ui/frontend/websocketMiddleware.ts

@@ -1,4 +1,4 @@
-import { Middleware } from 'redux';
+import { Middleware } from '@reduxjs/toolkit';
 import { z } from 'zod';
 
 import {

ui/frontend/yarn.lock

@@ -1407,6 +1407,16 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@reduxjs/toolkit@^1.8.5":
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.3.tgz#27e1a33072b5a312e4f7fa19247fec160bbb2df9"
+  integrity sha512-GU2TNBQVofL09VGmuSioNPQIu6Ml0YLf4EJhgj0AvBadRlCGzUWet8372LjvO4fqKZF2vH1xU0htAa7BrK9pZg==
+  dependencies:
+    immer "^9.0.16"
+    redux "^4.2.0"
+    redux-thunk "^2.4.2"
+    reselect "^4.1.7"
+
 "@sinclair/typebox@^0.25.16":
   version "0.25.24"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
@@ -3570,6 +3580,11 @@ image-size@~0.5.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
 
+immer@^9.0.16:
+  version "9.0.19"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.19.tgz#67fb97310555690b5f9cd8380d38fc0aabb6b38b"
+  integrity sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ==
+
 immutable@^4.0.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.0.tgz#eb1738f14ffb39fd068b1dbe1296117484dd34be"
@@ -5340,12 +5355,12 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redux-thunk@^2.1.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.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
   integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
@@ -5430,7 +5445,7 @@ require-from-string@^2.0.2:
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
-reselect@^4.0.0:
+reselect@^4.1.7:
   version "4.1.7"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.7.tgz#56480d9ff3d3188970ee2b76527bd94a95567a42"
   integrity sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==