refactor: introduce redux toolkit (apache#23460)

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
sebastianliebscher · Apr 28, 2023 · 9691c0d · 9691c0d
1 parent 2c782d6
commit 9691c0d
Show file tree

Hide file tree

Showing 12 changed files with 186 additions and 131 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -84,6 +84,7 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@fontsource/inter": "^4.0.0",
+    "@reduxjs/toolkit": "^1.9.3",
     "@superset-ui/chart-controls": "file:./packages/superset-ui-chart-controls",
     "@superset-ui/core": "file:./packages/superset-ui-core",
     "@superset-ui/legacy-plugin-chart-calendar": "file:./plugins/legacy-plugin-chart-calendar",
@@ -197,7 +198,7 @@
     "react-virtualized": "9.19.1",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",
-    "redux": "^4.0.5",
+    "redux": "^4.2.1",
     "redux-localstorage": "^0.4.1",
     "redux-thunk": "^2.1.0",
     "redux-undo": "^1.0.0-beta9-9-7",

diff --git a/superset-frontend/packages/superset-ui-core/src/chart/components/SuperChart.tsx b/superset-frontend/packages/superset-ui-core/src/chart/components/SuperChart.tsx
@@ -103,8 +103,10 @@ class SuperChart extends React.PureComponent<Props, {}> {
   private createChartProps = ChartProps.createSelector();
 
   private parseDimension = createSelector(
-    ({ width }: { width: string | number; height: string | number }) => width,
-    ({ height }) => height,
+    [
+      ({ width }: { width: string | number; height: string | number }) => width,
+      ({ height }) => height,
+    ],
     (width, height) => {
       // Parse them in case they are % or 'auto'
       const widthInfo = parseLength(width);

diff --git a/superset-frontend/packages/superset-ui-core/src/chart/components/SuperChartCore.tsx b/superset-frontend/packages/superset-ui-core/src/chart/components/SuperChartCore.tsx
@@ -95,15 +95,17 @@ export default class SuperChartCore extends React.PureComponent<Props, {}> {
    * is changed.
    */
   processChartProps = createSelector(
-    (input: {
-      chartProps: ChartProps;
-      preTransformProps?: PreTransformProps;
-      transformProps?: TransformProps;
-      postTransformProps?: PostTransformProps;
-    }) => input.chartProps,
-    input => input.preTransformProps,
-    input => input.transformProps,
-    input => input.postTransformProps,
+    [
+      (input: {
+        chartProps: ChartProps;
+        preTransformProps?: PreTransformProps;
+        transformProps?: TransformProps;
+        postTransformProps?: PostTransformProps;
+      }) => input.chartProps,
+      input => input.preTransformProps,
+      input => input.transformProps,
+      input => input.postTransformProps,
+    ],
     (chartProps, pre = IDENTITY, transform = IDENTITY, post = IDENTITY) =>
       post(transform(pre(chartProps))),
   );
@@ -117,9 +119,11 @@ export default class SuperChartCore extends React.PureComponent<Props, {}> {
    * is changed.
    */
   private createLoadableRenderer = createSelector(
-    (input: { chartType: string; overrideTransformProps?: TransformProps }) =>
-      input.chartType,
-    input => input.overrideTransformProps,
+    [
+      (input: { chartType: string; overrideTransformProps?: TransformProps }) =>
+        input.chartType,
+      input => input.overrideTransformProps,
+    ],
     (chartType, overrideTransformProps) => {
       if (chartType) {
         const Renderer = createLoadableRenderer({

diff --git a/superset-frontend/plugins/preset-chart-xy/src/components/Line/Line.tsx b/superset-frontend/plugins/preset-chart-xy/src/components/Line/Line.tsx
@@ -106,11 +106,15 @@ export interface SeriesValue {
 const CIRCLE_STYLE = { strokeWidth: 1.5 };
 
 export default class LineChart extends PureComponent<Props> {
-  private createEncoder = lineEncoderFactory.createSelector();
+  private createEncoder = lineEncoderFactory.createSelector() as (
+    encoding: Partial<LineEncoding>,
+  ) => LineEncoder;
 
   private createAllSeries = createSelector(
-    (input: { encoder: LineEncoder; data: Dataset }) => input.encoder,
-    input => input.data,
+    [
+      (input: { encoder: LineEncoder; data: Dataset }) => input.encoder,
+      input => input.data,
+    ],
     (encoder, data) => {
       const { channels } = encoder;
       const fieldNames = encoder.getGroupBys();

diff --git a/superset-frontend/plugins/preset-chart-xy/src/utils/createMarginSelector.tsx b/superset-frontend/plugins/preset-chart-xy/src/utils/createMarginSelector.tsx
@@ -26,10 +26,12 @@ export default function createMarginSelector(
   defaultMargin: Margin = DEFAULT_MARGIN,
 ) {
   return createSelector(
-    (margin: Partial<Margin>) => margin.bottom,
-    margin => margin.left,
-    margin => margin.right,
-    margin => margin.top,
+    [
+      (margin: Partial<Margin>) => margin.bottom,
+      margin => margin.left,
+      margin => margin.right,
+      margin => margin.top,
+    ],
     (
       bottom = defaultMargin.bottom,
       left = defaultMargin.left,

diff --git a/superset-frontend/spec/fixtures/mockStore.js b/superset-frontend/spec/fixtures/mockStore.js
@@ -16,10 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { createStore, applyMiddleware, compose } from 'redux';
-import thunk from 'redux-thunk';
-
-import { rootReducer } from 'src/views/store';
+import { setupStore } from 'src/views/store';
 import { FilterBarOrientation } from 'src/dashboard/types';
 
 import mockState from './mockState';
@@ -32,38 +29,38 @@ import { dashboardFilters } from './mockDashboardFilters';
 import { nativeFilters, dataMaskWith2Filters } from './mockNativeFilters';
 
 export const storeWithState = state =>
-  createStore(rootReducer, state, compose(applyMiddleware(thunk)));
+  setupStore({
+    disableDebugger: true,
+    initialState: state,
+  });
 
 export const getMockStore = overrideState =>
-  createStore(
-    rootReducer,
-    { ...mockState, ...overrideState },
-    compose(applyMiddleware(thunk)),
-  );
+  setupStore({
+    disableDebugger: true,
+    initialState: { ...mockState, ...overrideState },
+  });
 
 export const mockStore = getMockStore();
 
 export const getMockStoreWithTabs = () =>
-  createStore(
-    rootReducer,
-    {
+  setupStore({
+    disableDebugger: true,
+    initialState: {
       ...mockState,
       dashboardLayout: dashboardLayoutWithTabs,
       dashboardFilters: {},
     },
-    compose(applyMiddleware(thunk)),
-  );
+  });
 
 export const getMockStoreWithChartsInTabsAndRoot = () =>
-  createStore(
-    rootReducer,
-    {
+  setupStore({
+    disableDebugger: true,
+    initialState: {
       ...mockState,
       dashboardLayout: dashboardLayoutWithChartsInTabsAndRoot,
       dashboardFilters: {},
     },
-    compose(applyMiddleware(thunk)),
-  );
+  });
 
 export const mockStoreWithTabs = getMockStoreWithTabs();
 export const mockStoreWithChartsInTabsAndRoot =
@@ -101,7 +98,10 @@ export const stateWithFilters = {
 // one chart with a filter that has been rejected,
 // and one chart with no filters set.
 export const getMockStoreWithFilters = () =>
-  createStore(rootReducer, stateWithFilters);
+  setupStore({
+    disableDebugger: true,
+    initialState: stateWithFilters,
+  });
 
 export const stateWithNativeFilters = {
   ...mockState,
@@ -132,7 +132,10 @@ export const stateWithNativeFilters = {
 };
 
 export const getMockStoreWithNativeFilters = () =>
-  createStore(rootReducer, stateWithNativeFilters);
+  setupStore({
+    disableDebugger: true,
+    initialState: stateWithNativeFilters,
+  });
 
 export const stateWithoutNativeFilters = {
   ...mockState,