refactor(state): replace redux with zustand

src/additional-components/Background/index.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useMemo, FC, HTMLAttributes } from 'react';
 import cc from 'classcat';
 
-import { useStoreState } from '../../store/hooks';
-import { BackgroundVariant } from '../../types';
+import { useStore } from '../../store';
+import { BackgroundVariant, ReactFlowState } from '../../types';
 import { createGridLinesPath, createGridDotsPath } from './utils';
 
 export interface BackgroundProps extends HTMLAttributes<SVGElement> {
@@ -17,6 +17,8 @@ const defaultColors = {
   [BackgroundVariant.Lines]: '#eee',
 };
 
+const transformSelector = (s: ReactFlowState) => s.transform;
+
 const Background: FC<BackgroundProps> = ({
   variant = BackgroundVariant.Dots,
   gap = 15,
@@ -25,7 +27,7 @@ const Background: FC<BackgroundProps> = ({
   style,
   className,
 }) => {
-  const [x, y, scale] = useStoreState((s) => s.transform);
+  const [x, y, scale] = useStore(transformSelector);
   // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
   const patternId = useMemo(() => `pattern-${Math.floor(Math.random() * 100000)}`, []);
 

src/additional-components/Controls/index.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, HTMLAttributes, FC, useEffect, useState } from 'react';
 import cc from 'classcat';
 
-import { useStoreState, useStoreActions } from '../../store/hooks';
+import { useStore } from '../../store';
 
 import PlusIcon from '../../../assets/icons/plus.svg';
 import MinusIcon from '../../../assets/icons/minus.svg';
@@ -10,7 +10,7 @@ import LockIcon from '../../../assets/icons/lock.svg';
 import UnlockIcon from '../../../assets/icons/unlock.svg';
 
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
-import { FitViewParams } from '../../types';
+import { FitViewParams, ReactFlowState } from '../../types';
 
 export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   showZoom?: boolean;
@@ -31,6 +31,9 @@ export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...
   </button>
 );
 
+const setInteractiveSelector = (s: ReactFlowState) => s.setInteractive;
+const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
+
 const Controls: FC<ControlProps> = ({
   style,
   showZoom = true,
@@ -45,10 +48,10 @@ const Controls: FC<ControlProps> = ({
   children,
 }) => {
   const [isVisible, setIsVisible] = useState<boolean>(false);
-  const setInteractive = useStoreActions((actions) => actions.setInteractive);
+  const setInteractive = useStore(setInteractiveSelector);
+  const isInteractive = useStore(isInteractiveSelector);
   const { zoomIn, zoomOut, fitView } = useZoomPanHelper();
 
-  const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
   const mapClasses = cc(['react-flow__controls', className]);
 
   const onZoomInHandler = useCallback(() => {

src/additional-components/MiniMap/index.tsx

@@ -1,9 +1,9 @@
 import React, { memo, HTMLAttributes } from 'react';
 import cc from 'classcat';
 
-import { useStoreState } from '../../store/hooks';
+import { useStore } from '../../store';
 import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
-import { Node, Rect } from '../../types';
+import { Node, Rect, ReactFlowState } from '../../types';
 import MiniMapNode from './MiniMapNode';
 
 type StringFunc = (node: Node) => string;
@@ -22,6 +22,8 @@ declare const window: any;
 const defaultWidth = 200;
 const defaultHeight = 150;
 
+const selector = (s: ReactFlowState) => ({ width: s.width, height: s.height, transform: s.transform, nodes: s.nodes });
+
 const MiniMap = ({
   style,
   className,
@@ -32,10 +34,8 @@ const MiniMap = ({
   nodeStrokeWidth = 2,
   maskColor = 'rgb(240, 242, 243, 0.7)',
 }: MiniMapProps) => {
-  const containerWidth = useStoreState((s) => s.width);
-  const containerHeight = useStoreState((s) => s.height);
-  const [tX, tY, tScale] = useStoreState((s) => s.transform);
-  const nodes = useStoreState((s) => s.nodes);
+  const { width: containerWidth, height: containerHeight, transform, nodes } = useStore(selector);
+  const [tX, tY, tScale] = transform;
 
   const mapClasses = cc(['react-flow__minimap', className]);
   const elementWidth = (style?.width || defaultWidth)! as number;

src/additional-components/ReactFlowProvider/index.tsx

@@ -1,16 +1,8 @@
-import React, { FC, useMemo } from 'react';
-import { Provider } from 'react-redux';
+import React, { FC } from 'react';
 
-import { initialState } from '../../store';
-import configureStore from '../../store/configure-store';
+import { Provider, createStore } from '../../store';
 
-const ReactFlowProvider: FC = ({ children }) => {
-  const store = useMemo(() => {
-    return configureStore(initialState);
-  }, []);
-
-  return <Provider store={store}>{children}</Provider>;
-};
+const ReactFlowProvider: FC = ({ children }) => <Provider createStore={createStore}>{children}</Provider>;
 
 ReactFlowProvider.displayName = 'ReactFlowProvider';