Rewrite configuration reducer in RTK

Author: shepmaster

ui/frontend/.eslintrc.js

@@ -74,6 +74,7 @@ module.exports = {
         'reducers/browser.ts',
         'reducers/client.ts',
         'reducers/code.ts',
+        'reducers/configuration.ts',
         'reducers/crates.ts',
         'reducers/featureFlags.ts',
         'reducers/globalConfiguration.ts',

ui/frontend/.prettierignore

@@ -25,6 +25,7 @@ node_modules
 !reducers/browser.ts
 !reducers/client.ts
 !reducers/code.ts
+!reducers/configuration.ts
 !reducers/crates.ts
 !reducers/featureFlags.ts
 !reducers/globalConfiguration.ts

ui/frontend/AdvancedOptionsMenu.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import * as actions from './actions';
+import * as config from './reducers/configuration';
 import { Either as EitherConfig, Select as SelectConfig } from './ConfigElement';
 import MenuGroup from './MenuGroup';
 import { State } from './reducers';
@@ -16,8 +16,8 @@ const AdvancedOptionsMenu: React.FC = () => {
 
   const dispatch = useDispatch();
 
-  const changeEdition = useCallback((e: Edition) => dispatch(actions.changeEdition(e)), [dispatch]);
-  const changeBacktrace = useCallback((b: Backtrace) => dispatch(actions.changeBacktrace(b)), [dispatch]);
+  const changeEdition = useCallback((e: Edition) => dispatch(config.changeEdition(e)), [dispatch]);
+  const changeBacktrace = useCallback((b: Backtrace) => dispatch(config.changeBacktrace(b)), [dispatch]);
 
   const channel  = useSelector((state: State) => state.configuration.channel);
   const switchText = (channel !== Channel.Nightly) ? ' (will select nightly Rust)' : '';

ui/frontend/ChannelMenu.tsx

@@ -4,7 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import MenuGroup from './MenuGroup';
 import SelectOne from './SelectOne';
 
-import * as actions from './actions';
+import * as config from './reducers/configuration';
 import * as selectors from './selectors';
 import State from './state';
 import { Channel } from './types';
@@ -25,7 +25,7 @@ const ChannelMenu: React.FC<ChannelMenuProps> = props => {
 
   const dispatch = useDispatch();
   const changeChannel = useCallback((channel: Channel) => {
-    dispatch(actions.changeChannel(channel));
+    dispatch(config.changeChannel(channel));
     props.close();
   }, [dispatch, props]);
 

ui/frontend/ConfigMenu.tsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Either as EitherConfig, Select as SelectConfig } from './ConfigElement';
 import MenuGroup from './MenuGroup';
 
-import * as actions from './actions';
+import * as config from './reducers/configuration';
 import State from './state';
 import {
   AssemblyFlavor,
@@ -33,19 +33,19 @@ const ConfigMenu: React.FC = () => {
   const processAssembly = useSelector((state: State) => state.configuration.processAssembly);
 
   const dispatch = useDispatch();
-  const changeAceTheme = useCallback((t: string) => dispatch(actions.changeAceTheme(t)), [dispatch]);
-  const changeMonacoTheme = useCallback((t: string) => dispatch(actions.changeMonacoTheme(t)), [dispatch]);
-  const changeKeybinding = useCallback((k: string) => dispatch(actions.changeKeybinding(k)), [dispatch]);
-  const changeOrientation = useCallback((o: Orientation) => dispatch(actions.changeOrientation(o)), [dispatch]);
-  const changeEditorStyle = useCallback((e: Editor) => dispatch(actions.changeEditor(e)), [dispatch]);
+  const changeAceTheme = useCallback((t: string) => dispatch(config.changeAceTheme(t)), [dispatch]);
+  const changeMonacoTheme = useCallback((t: string) => dispatch(config.changeMonacoTheme(t)), [dispatch]);
+  const changeKeybinding = useCallback((k: string) => dispatch(config.changeKeybinding(k)), [dispatch]);
+  const changeOrientation = useCallback((o: Orientation) => dispatch(config.changeOrientation(o)), [dispatch]);
+  const changeEditorStyle = useCallback((e: Editor) => dispatch(config.changeEditor(e)), [dispatch]);
   const changeAssemblyFlavor =
-    useCallback((a: AssemblyFlavor) => dispatch(actions.changeAssemblyFlavor(a)), [dispatch]);
+    useCallback((a: AssemblyFlavor) => dispatch(config.changeAssemblyFlavor(a)), [dispatch]);
   const changePairCharacters =
-    useCallback((p: PairCharacters) => dispatch(actions.changePairCharacters(p)), [dispatch]);
+    useCallback((p: PairCharacters) => dispatch(config.changePairCharacters(p)), [dispatch]);
   const changeProcessAssembly =
-    useCallback((p: ProcessAssembly) => dispatch(actions.changeProcessAssembly(p)), [dispatch]);
+    useCallback((p: ProcessAssembly) => dispatch(config.changeProcessAssembly(p)), [dispatch]);
   const changeDemangleAssembly =
-    useCallback((d: DemangleAssembly) => dispatch(actions.changeDemangleAssembly(d)), [dispatch]);
+    useCallback((d: DemangleAssembly) => dispatch(config.changeDemangleAssembly(d)), [dispatch]);
 
   return (
     <Fragment>

ui/frontend/ModeMenu.tsx

@@ -4,7 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import MenuGroup from './MenuGroup';
 import SelectOne from './SelectOne';
 
-import * as actions from './actions';
+import * as config from './reducers/configuration';
 import State from './state';
 import { Mode } from './types';
 
@@ -16,7 +16,7 @@ const ModeMenu: React.FC<ModeMenuProps> = props => {
   const mode = useSelector((state: State) => state.configuration.mode);
   const dispatch = useDispatch();
   const changeMode = useCallback((mode: Mode) => {
-    dispatch(actions.changeMode(mode));
+    dispatch(config.changeMode(mode));
     props.close();
   }, [dispatch, props]
   );

ui/frontend/actions.ts

@@ -7,19 +7,13 @@ import {
 } from './selectors';
 import State from './state';
 import {
-  AssemblyFlavor,
   Backtrace,
   Channel,
-  DemangleAssembly,
   Edition,
-  Editor,
   Mode,
-  Orientation,
-  PairCharacters,
   PrimaryAction,
   PrimaryActionAuto,
   PrimaryActionCore,
-  ProcessAssembly,
 } from './types';
 
 import { performCommonExecute, wsExecuteRequest } from './reducers/output/execute';
@@ -31,6 +25,13 @@ import { performCompileToMirOnly } from './reducers/output/mir';
 import { performCompileToWasmOnly } from './reducers/output/wasm';
 import { navigateToHelp, navigateToIndex } from './reducers/page';
 import { addCrateType, editCode } from './reducers/code';
+import {
+  changeBacktrace,
+  changeChannel,
+  changeEditionRaw,
+  changeMode,
+  changePrimaryAction,
+} from './reducers/configuration';
 
 export type ThunkAction<T = void> = ReduxThunkAction<T, State, {}, Action>;
 export type SimpleThunkAction<T = void> = ReduxThunkAction<T, State, {}, AnyAction>;
@@ -41,73 +42,10 @@ const createAction = <T extends string, P extends {}>(type: T, props?: P) => (
 
 export enum ActionType {
   InitializeApplication = 'INITIALIZE_APPLICATION',
-  ChangeEditor = 'CHANGE_EDITOR',
-  ChangeKeybinding = 'CHANGE_KEYBINDING',
-  ChangeAceTheme = 'CHANGE_ACE_THEME',
-  ChangeMonacoTheme = 'CHANGE_MONACO_THEME',
-  ChangePairCharacters = 'CHANGE_PAIR_CHARACTERS',
-  ChangeOrientation = 'CHANGE_ORIENTATION',
-  ChangeAssemblyFlavor = 'CHANGE_ASSEMBLY_FLAVOR',
-  ChangePrimaryAction = 'CHANGE_PRIMARY_ACTION',
-  ChangeChannel = 'CHANGE_CHANNEL',
-  ChangeDemangleAssembly = 'CHANGE_DEMANGLE_ASSEMBLY',
-  ChangeProcessAssembly = 'CHANGE_PROCESS_ASSEMBLY',
-  ChangeMode = 'CHANGE_MODE',
-  ChangeEdition = 'CHANGE_EDITION',
-  ChangeBacktrace = 'CHANGE_BACKTRACE',
 }
 
 export const initializeApplication = () => createAction(ActionType.InitializeApplication);
 
-export const changeEditor = (editor: Editor) =>
-  createAction(ActionType.ChangeEditor, { editor });
-
-export const changeKeybinding = (keybinding: string) =>
-  createAction(ActionType.ChangeKeybinding, { keybinding });
-
-export const changeAceTheme = (theme: string) =>
-  createAction(ActionType.ChangeAceTheme, { theme });
-
-export const changeMonacoTheme = (theme: string) =>
-  createAction(ActionType.ChangeMonacoTheme, { theme });
-
-export const changePairCharacters = (pairCharacters: PairCharacters) =>
-  createAction(ActionType.ChangePairCharacters, { pairCharacters });
-
-export const changeOrientation = (orientation: Orientation) =>
-  createAction(ActionType.ChangeOrientation, { orientation });
-
-export const changeAssemblyFlavor = (assemblyFlavor: AssemblyFlavor) =>
-  createAction(ActionType.ChangeAssemblyFlavor, { assemblyFlavor });
-
-export const changeDemangleAssembly = (demangleAssembly: DemangleAssembly) =>
-  createAction(ActionType.ChangeDemangleAssembly, { demangleAssembly });
-
-export const changeProcessAssembly = (processAssembly: ProcessAssembly) =>
-  createAction(ActionType.ChangeProcessAssembly, { processAssembly });
-
-const changePrimaryAction = (primaryAction: PrimaryAction) =>
-  createAction(ActionType.ChangePrimaryAction, { primaryAction });
-
-export const changeChannel = (channel: Channel) =>
-  createAction(ActionType.ChangeChannel, { channel });
-
-export const changeMode = (mode: Mode) =>
-  createAction(ActionType.ChangeMode, { mode });
-
-const changeEditionRaw = (edition: Edition) =>
-  createAction(ActionType.ChangeEdition, { edition });
-
-export const changeEdition = (edition: Edition): ThunkAction => dispatch => {
-  if (edition === Edition.Rust2024) {
-    dispatch(changeChannel(Channel.Nightly));
-  }
-
-  dispatch(changeEditionRaw(edition));
-}
-
-export const changeBacktrace = (backtrace: Backtrace) =>
-  createAction(ActionType.ChangeBacktrace, { backtrace });
 
 export const reExecuteWithBacktrace = (): ThunkAction => dispatch => {
   dispatch(changeBacktrace(Backtrace.Enabled));
@@ -274,20 +212,11 @@ export function showExample(code: string): ThunkAction {
 
 export type Action =
   | ReturnType<typeof initializeApplication>
-  | ReturnType<typeof changePairCharacters>
-  | ReturnType<typeof changeAssemblyFlavor>
   | ReturnType<typeof changeBacktrace>
   | ReturnType<typeof changeChannel>
-  | ReturnType<typeof changeDemangleAssembly>
   | ReturnType<typeof changeEditionRaw>
-  | ReturnType<typeof changeEditor>
-  | ReturnType<typeof changeKeybinding>
   | ReturnType<typeof changeMode>
-  | ReturnType<typeof changeOrientation>
   | ReturnType<typeof changePrimaryAction>
-  | ReturnType<typeof changeProcessAssembly>
-  | ReturnType<typeof changeAceTheme>
-  | ReturnType<typeof changeMonacoTheme>
   | ReturnType<typeof editCode>
   | ReturnType<typeof addCrateType>
   | ReturnType<typeof navigateToIndex>

ui/frontend/reducers/configuration.ts

@@ -1,4 +1,6 @@
-import { Action, ActionType } from '../actions';
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+
+import { SimpleThunkAction } from '../actions';
 import {
   AssemblyFlavor,
   Backtrace,
@@ -35,7 +37,7 @@ export interface State {
   backtrace: Backtrace;
 }
 
-const DEFAULT: State = {
+const initialState: State = {
   editor: Editor.Ace,
   ace: {
     keybinding: 'ace',
@@ -56,48 +58,93 @@ const DEFAULT: State = {
   backtrace: Backtrace.Disabled,
 };
 
-export default function configuration(state = DEFAULT, action: Action): State {
-  switch (action.type) {
-    case ActionType.ChangeEditor:
-      return { ...state, editor: action.editor };
-    case ActionType.ChangeKeybinding: {
-      const { ace } = state;
+const slice = createSlice({
+  name: 'configuration',
+  initialState,
+  reducers: {
+    changeAceTheme: (state, action: PayloadAction<string>) => {
+      state.ace.theme = action.payload;
+    },
 
-      return { ...state, ace: { ...ace, keybinding: action.keybinding } };
-    }
-    case ActionType.ChangeAceTheme: {
-      const { ace } = state;
-      return { ...state, ace: { ...ace, theme: action.theme } };
-    }
-    case ActionType.ChangePairCharacters: {
-      const { ace } = state;
-      return { ...state, ace: { ...ace, pairCharacters: action.pairCharacters } };
-    }
-    case ActionType.ChangeMonacoTheme: {
-      const { monaco } = state;
-      return { ...state, monaco: { ...monaco, theme: action.theme } };
-    }
-    case ActionType.ChangeOrientation:
-      return { ...state, orientation: action.orientation };
-    case ActionType.ChangeAssemblyFlavor:
-      return { ...state, assemblyFlavor: action.assemblyFlavor };
-    case ActionType.ChangeDemangleAssembly:
-      return { ...state, demangleAssembly: action.demangleAssembly };
-    case ActionType.ChangeProcessAssembly:
-      return { ...state, processAssembly: action.processAssembly };
-    case ActionType.ChangePrimaryAction:
-      return { ...state, primaryAction: action.primaryAction };
-    case ActionType.ChangeChannel: {
-      return { ...state, channel: action.channel };
-    }
-    case ActionType.ChangeMode:
-      return { ...state, mode: action.mode };
-    case ActionType.ChangeEdition: {
-      return { ...state, edition: action.edition };
+    changeAssemblyFlavor: (state, action: PayloadAction<AssemblyFlavor>) => {
+      state.assemblyFlavor = action.payload;
+    },
+
+    changeBacktrace: (state, action: PayloadAction<Backtrace>) => {
+      state.backtrace = action.payload;
+    },
+
+    changeChannel: (state, action: PayloadAction<Channel>) => {
+      state.channel = action.payload;
+    },
+
+    changeDemangleAssembly: (state, action: PayloadAction<DemangleAssembly>) => {
+      state.demangleAssembly = action.payload;
+    },
+
+    changeEditionRaw: (state, action: PayloadAction<Edition>) => {
+      state.edition = action.payload;
+    },
+
+    changeEditor: (state, action: PayloadAction<Editor>) => {
+      state.editor = action.payload;
+    },
+
+    changeKeybinding: (state, action: PayloadAction<string>) => {
+      state.ace.keybinding = action.payload;
+    },
+
+    changeMode: (state, action: PayloadAction<Mode>) => {
+      state.mode = action.payload;
+    },
+
+    changeMonacoTheme: (state, action: PayloadAction<string>) => {
+      state.monaco.theme = action.payload;
+    },
+
+    changeOrientation: (state, action: PayloadAction<Orientation>) => {
+      state.orientation = action.payload;
+    },
+
+    changePairCharacters: (state, action: PayloadAction<PairCharacters>) => {
+      state.ace.pairCharacters = action.payload;
+    },
+
+    changePrimaryAction: (state, action: PayloadAction<PrimaryAction>) => {
+      state.primaryAction = action.payload;
+    },
+
+    changeProcessAssembly: (state, action: PayloadAction<ProcessAssembly>) => {
+      state.processAssembly = action.payload;
+    },
+  },
+});
+
+export const {
+  changeAceTheme,
+  changeAssemblyFlavor,
+  changeBacktrace,
+  changeChannel,
+  changeDemangleAssembly,
+  changeEditionRaw,
+  changeEditor,
+  changeKeybinding,
+  changeMode,
+  changeMonacoTheme,
+  changeOrientation,
+  changePairCharacters,
+  changePrimaryAction,
+  changeProcessAssembly,
+} = slice.actions;
+
+export const changeEdition =
+  (edition: Edition): SimpleThunkAction =>
+  (dispatch) => {
+    if (edition === Edition.Rust2024) {
+      dispatch(changeChannel(Channel.Nightly));
     }
-    case ActionType.ChangeBacktrace:
-      return { ...state, backtrace: action.backtrace };
-    default:
-      return state;
-  }
-}
+
+    dispatch(changeEditionRaw(edition));
+  };
+
+export default slice.reducer;