Moving Axes to Redux (#4524)

recharts · May 13, 2024 · f260ab4 · f260ab4
1 parent 1412466
commit f260ab4
Show file tree

Hide file tree

Showing 23 changed files with 581 additions and 376 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -117,6 +117,11 @@
         "import/no-default-export": "off",
         "react-hooks/rules-of-hooks": "off"
       }
+    },
+    {
+      "files": ["src/state/*Slice.ts"],
+      // param-reassign is allowed in slices following Redux recommendation: https://redux-toolkit.js.org/usage/immer-reducers#linting-state-mutations
+      "rules": { "no-param-reassign": ["error", { "props": false }] }
     }
   ],
   "settings": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,6 +76,7 @@
     "clsx": "^2.0.0",
     "decimal.js-light": "^2.4.1",
     "eventemitter3": "^4.0.1",
+    "immer": "^10.1.1",
     "lodash": "^4.17.21",
     "react-is": "^16.10.2",
     "react-redux": "^8.1.3",

diff --git a/scripts/snapshots/es6Files.txt b/scripts/snapshots/es6Files.txt
@@ -55,8 +55,11 @@
   "es6/state/store.js",
   "es6/state/selectors.js",
   "es6/state/optionsSlice.js",
+  "es6/state/layoutSlice.js",
   "es6/state/hooks.js",
   "es6/state/chartDataSlice.js",
+  "es6/state/axisSlice.js",
+  "es6/state/SetTooltipEntrySettings.js",
   "es6/state/RechartsStoreProvider.js",
   "es6/shape/Trapezoid.js",
   "es6/shape/Symbols.js",

diff --git a/scripts/snapshots/libFiles.txt b/scripts/snapshots/libFiles.txt
@@ -55,8 +55,11 @@
   "lib/state/store.js",
   "lib/state/selectors.js",
   "lib/state/optionsSlice.js",
+  "lib/state/layoutSlice.js",
   "lib/state/hooks.js",
   "lib/state/chartDataSlice.js",
+  "lib/state/axisSlice.js",
+  "lib/state/SetTooltipEntrySettings.js",
   "lib/state/RechartsStoreProvider.js",
   "lib/shape/Trapezoid.js",
   "lib/shape/Symbols.js",

diff --git a/scripts/snapshots/typesFiles.txt b/scripts/snapshots/typesFiles.txt
@@ -55,8 +55,11 @@
   "types/state/store.d.ts",
   "types/state/selectors.d.ts",
   "types/state/optionsSlice.d.ts",
+  "types/state/layoutSlice.d.ts",
   "types/state/hooks.d.ts",
   "types/state/chartDataSlice.d.ts",
+  "types/state/axisSlice.d.ts",
+  "types/state/SetTooltipEntrySettings.d.ts",
   "types/state/RechartsStoreProvider.d.ts",
   "types/shape/Trapezoid.d.ts",
   "types/shape/Symbols.d.ts",

diff --git a/src/cartesian/Area.tsx b/src/cartesian/Area.tsx
@@ -1,7 +1,7 @@
 /**
  * @fileOverview Area
  */
-import React, { PureComponent, SVGProps, useEffect } from 'react';
+import React, { PureComponent, SVGProps } from 'react';
 import clsx from 'clsx';
 import Animate from 'react-smooth';
 import isFunction from 'lodash/isFunction';
@@ -14,33 +14,29 @@ import { Dot } from '../shape/Dot';
 import { Layer } from '../container/Layer';
 import { LabelList } from '../component/LabelList';
 import { Global } from '../util/Global';
-import { isNumber, uniqueId, interpolateNumber } from '../util/DataUtils';
+import { interpolateNumber, isNumber, uniqueId } from '../util/DataUtils';
 import { getCateCoordinateOfLine, getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils';
 import { Props as XAxisProps } from './XAxis';
 import { Props as YAxisProps } from './YAxis';
 import {
-  D3Scale,
-  LegendType,
-  TooltipType,
+  ActiveDotType,
+  AnimationDuration,
   AnimationTiming,
   ChartOffset,
   Coordinate,
+  D3Scale,
   DataKey,
-  TickItem,
-  AnimationDuration,
   LayoutType,
-  ActiveDotType,
+  LegendType,
+  TickItem,
+  TooltipType,
 } from '../util/types';
 import { filterProps, isDotProps } from '../util/ReactUtils';
 import type { Payload as LegendPayload } from '../component/DefaultLegendContent';
 import { useLegendPayloadDispatch } from '../context/legendPayloadContext';
 import { ActivePoints } from '../component/ActivePoints';
-import {
-  addTooltipEntrySettings,
-  removeTooltipEntrySettings,
-  TooltipPayloadConfiguration,
-} from '../state/tooltipSlice';
-import { useAppDispatch } from '../state/hooks';
+import { TooltipPayloadConfiguration } from '../state/tooltipSlice';
+import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
 
 interface AreaPointItem extends CurvePoint {
   value?: number | number[];
@@ -154,18 +150,6 @@ function getTooltipEntrySettings(props: Props): TooltipPayloadConfiguration {
   };
 }
 
-function SetTooltipEntrySettings(props: Props): null {
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    const tooltipEntrySettings: TooltipPayloadConfiguration = getTooltipEntrySettings(props);
-    dispatch(addTooltipEntrySettings(tooltipEntrySettings));
-    return () => {
-      dispatch(removeTooltipEntrySettings(tooltipEntrySettings));
-    };
-  }, [props, dispatch]);
-  return null;
-}
-
 export class Area extends PureComponent<Props, State> {
   static displayName = 'Area';
 
@@ -620,7 +604,7 @@ export class Area extends PureComponent<Props, State> {
       return (
         <>
           <SetAreaLegend {...this.props} />
-          <SetTooltipEntrySettings {...this.props} />
+          <SetTooltipEntrySettings fn={getTooltipEntrySettings} args={this.props} />
         </>
       );
     }
@@ -640,7 +624,7 @@ export class Area extends PureComponent<Props, State> {
       <>
         <Layer className={layerClass}>
           <SetAreaLegend {...this.props} />
-          <SetTooltipEntrySettings {...this.props} />
+          <SetTooltipEntrySettings fn={getTooltipEntrySettings} args={this.props} />
           {needClipX || needClipY ? (
             <defs>
               <clipPath id={`clipPath-${clipPathId}`}>

diff --git a/src/cartesian/Bar.tsx b/src/cartesian/Bar.tsx
@@ -1,7 +1,7 @@
 /**
  * @fileOverview Render a group of bar
  */
-import React, { Key, PureComponent, ReactElement, useEffect } from 'react';
+import React, { Key, PureComponent, ReactElement } from 'react';
 import clsx from 'clsx';
 import Animate from 'react-smooth';
 import isEqual from 'lodash/isEqual';
@@ -49,12 +49,8 @@ import {
   useMouseLeaveItemDispatch,
   useTooltipContext,
 } from '../context/tooltipContext';
-import { useAppDispatch } from '../state/hooks';
-import {
-  addTooltipEntrySettings,
-  removeTooltipEntrySettings,
-  TooltipPayloadConfiguration,
-} from '../state/tooltipSlice';
+import { TooltipPayloadConfiguration } from '../state/tooltipSlice';
+import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
 
 export interface BarRectangleItem extends RectangleProps {
   value?: number | [number, number];
@@ -162,18 +158,6 @@ function getTooltipEntrySettings(props: Props): TooltipPayloadConfiguration {
   };
 }
 
-function SetTooltipEntrySettings(props: Props): null {
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    const tooltipEntrySettings: TooltipPayloadConfiguration = getTooltipEntrySettings(props);
-    dispatch(addTooltipEntrySettings(tooltipEntrySettings));
-    return () => {
-      dispatch(removeTooltipEntrySettings(tooltipEntrySettings));
-    };
-  }, [props, dispatch]);
-  return null;
-}
-
 type BarBackgroundProps = {
   background?: ActiveShape<BarProps, SVGPathElement>;
   data: BarRectangleItem[];
@@ -653,7 +637,7 @@ export class Bar extends PureComponent<Props, State> {
       return (
         <>
           <SetBarLegend {...this.props} />
-          <SetTooltipEntrySettings {...this.props} />
+          <SetTooltipEntrySettings fn={getTooltipEntrySettings} args={this.props} />
         </>
       );
     }
@@ -668,7 +652,7 @@ export class Bar extends PureComponent<Props, State> {
     return (
       <Layer className={layerClass}>
         <SetBarLegend {...this.props} />
-        <SetTooltipEntrySettings {...this.props} />
+        <SetTooltipEntrySettings fn={getTooltipEntrySettings} args={this.props} />
         {needClipX || needClipY ? (
           <defs>
             <clipPath id={`clipPath-${clipPathId}`}>

diff --git a/src/cartesian/Line.tsx b/src/cartesian/Line.tsx
@@ -1,7 +1,7 @@
 /**
  * @fileOverview Line
  */
-import React, { PureComponent, ReactElement, useEffect } from 'react';
+import React, { PureComponent, ReactElement } from 'react';
 import Animate from 'react-smooth';
 import isFunction from 'lodash/isFunction';
 import isNil from 'lodash/isNil';
@@ -35,12 +35,8 @@ import {
 import type { Payload as LegendPayload } from '../component/DefaultLegendContent';
 import { useLegendPayloadDispatch } from '../context/legendPayloadContext';
 import { ActivePoints } from '../component/ActivePoints';
-import { useAppDispatch } from '../state/hooks';
-import {
-  addTooltipEntrySettings,
-  removeTooltipEntrySettings,
-  TooltipPayloadConfiguration,
-} from '../state/tooltipSlice';
+import { TooltipPayloadConfiguration } from '../state/tooltipSlice';
+import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
 
 export interface LinePointItem extends CurvePoint {
   value?: number;
@@ -140,18 +136,6 @@ function getTooltipEntrySettings(props: Props): TooltipPayloadConfiguration {
   };
 }
 
-function SetTooltipEntrySettings(props: Props): null {
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    const tooltipEntrySettings = getTooltipEntrySettings(props);
-    dispatch(addTooltipEntrySettings(tooltipEntrySettings));
-    return () => {
-      dispatch(removeTooltipEntrySettings(tooltipEntrySettings));
-    };
-  }, [props, dispatch]);
-  return null;
-}
-
 export class Line extends PureComponent<Props, State> {
   static displayName = 'Line';
 
@@ -551,7 +535,7 @@ export class Line extends PureComponent<Props, State> {
       return (
         <>
           <SetLineLegend {...this.props} />
-          <SetTooltipEntrySettings {...this.props} />
+          <SetTooltipEntrySettings fn={getTooltipEntrySettings} args={this.props} />
         </>
       );
     }
@@ -571,7 +555,7 @@ export class Line extends PureComponent<Props, State> {
       <>
         <Layer className={layerClass}>
           <SetLineLegend {...this.props} />
-          <SetTooltipEntrySettings {...this.props} />
+          <SetTooltipEntrySettings fn={getTooltipEntrySettings} args={this.props} />
           {needClipX || needClipY ? (
             <defs>
               <clipPath id={`clipPath-${clipPathId}`}>