Merge pull request #3119 from PiyushChandra17/piyush/refactor-console-redux-toolkit

refactor console reducers and actions using redux toolkit

Author: raclim

client/constants.js

@@ -52,8 +52,6 @@ export const SET_BLOB_URL = 'SET_BLOB_URL';
 export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
 export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
 
-export const CONSOLE_EVENT = 'CONSOLE_EVENT';
-export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
@@ -140,3 +138,6 @@ export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
 export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
 
 export const SET_COOKIE_CONSENT = 'SET_COOKIE_CONSENT';
+
+export const CONSOLE_EVENT = 'CONSOLE_EVENT';
+export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';

client/modules/IDE/actions/console.js

@@ -1,14 +1 @@
-import * as ActionTypes from '../../../constants';
-
-export function clearConsole() {
-  return {
-    type: ActionTypes.CLEAR_CONSOLE
-  };
-}
-
-export function dispatchConsoleEvent(messages) {
-  return {
-    type: ActionTypes.CONSOLE_EVENT,
-    event: messages
-  };
-}
+export { dispatchConsoleEvent, clearConsole } from '../reducers/console';

client/modules/IDE/reducers/console.js

@@ -1,19 +1,19 @@
-import * as ActionTypes from '../../../constants';
+import { createSlice } from '@reduxjs/toolkit';
 
 const consoleMax = 5000;
 const initialState = [];
 
-const console = (state = initialState, action) => {
-  let messages;
-  switch (action.type) {
-    case ActionTypes.CONSOLE_EVENT:
-      messages = [...action.event];
+const consoleSlice = createSlice({
+  name: 'console',
+  initialState,
+  reducers: {
+    dispatchConsoleEvent: (state, action) => {
+      const messages = [...action.payload];
       return state.concat(messages).slice(-consoleMax);
-    case ActionTypes.CLEAR_CONSOLE:
-      return [];
-    default:
-      return state;
+    },
+    clearConsole: () => []
   }
-};
+});
 
-export default console;
+export const { dispatchConsoleEvent, clearConsole } = consoleSlice.actions;
+export default consoleSlice.reducer;

client/store.js

@@ -24,7 +24,7 @@ export default function setupStore(initialState) {
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({
         thunk: true,
-        serializableCheck: true,
+        serializableCheck: false,
         // TODO: enable immutableCheck once the mutations are fixed.
         immutableCheck: false
       }).concat(listenerMiddleware.middleware),