chore(react): add redux example

examples/react/package.json

@@ -14,13 +14,16 @@
     "test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.3",
     "@xyflow/react": "workspace:*",
     "classcat": "^5.0.4",
     "dagre": "^0.8.5",
     "localforage": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.1.1",
     "react-router-dom": "^6.18.0",
+    "redux": "^5.0.1",
     "zustand": "^4.4.6"
   },
   "devDependencies": {

examples/react/src/App/routes.ts

@@ -51,6 +51,7 @@ import UseNodesData from '../examples/UseNodesData';
 import UseHandleConnections from '../examples/UseHandleConnections';
 import AddNodeOnEdgeDrop from '../examples/AddNodeOnEdgeDrop';
 import DevTools from '../examples/DevTools';
+import Redux from '../examples/Redux';
 
 export interface IRoute {
   name: string;
@@ -314,6 +315,11 @@ const routes: IRoute[] = [
     path: 'useupdatenodeinternals',
     component: UseUpdateNodeInternals,
   },
+  {
+    name: 'redux',
+    path: 'redux',
+    component: Redux,
+  },
   {
     name: 'Validation',
     path: 'validation',

examples/react/src/examples/Redux/index.tsx

@@ -0,0 +1,30 @@
+import { ReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+import { useDispatch, useSelector, Provider } from 'react-redux';
+
+import { onNodesChange, onEdgesChange, setSelectedNodesAndEdges, store } from './state';
+
+const OverviewFlow = () => {
+  const dispatch = useDispatch();
+  const nodes = useSelector((state) => state.myApplication.nodes);
+  const edges = useSelector((state) => state.myApplication.edges);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={(e) => dispatch(onNodesChange(e))}
+      onEdgesChange={(e) => dispatch(onEdgesChange(e))}
+      onSelectionChange={(e) => dispatch(setSelectedNodesAndEdges(e))}
+      fitView
+      attributionPosition="top-right"
+    />
+  );
+};
+
+export default () => (
+  <Provider store={store}>
+    <OverviewFlow />
+  </Provider>
+);

examples/react/src/examples/Redux/initial-elements.tsx

@@ -0,0 +1,98 @@
+import { MarkerType, type Node, type Edge } from '@xyflow/react';
+
+export const nodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: {
+      label: 'hey',
+    },
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    data: {
+      label: 'default node',
+    },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    data: {
+      label: 'custom style',
+    },
+    position: { x: 400, y: 100 },
+    style: {
+      background: '#D6D5E6',
+      color: '#333',
+      border: '1px solid #222138',
+      width: 180,
+    },
+  },
+  {
+    id: '4',
+    position: { x: 250, y: 200 },
+    data: {
+      label: 'Another default node',
+    },
+  },
+  {
+    id: '5',
+    data: {
+      label: 'Node id: 5',
+    },
+    position: { x: 250, y: 325 },
+  },
+  {
+    id: '6',
+    type: 'output',
+    data: {
+      label: 'output',
+    },
+    position: { x: 100, y: 480 },
+  },
+  {
+    id: '7',
+    type: 'output',
+    data: { label: 'Another output node' },
+    position: { x: 400, y: 450 },
+  },
+];
+
+export const edges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
+  { id: 'e1-3', source: '1', target: '3' },
+  {
+    id: 'e3-4',
+    source: '3',
+    target: '4',
+    animated: true,
+    label: 'animated edge',
+  },
+  {
+    id: 'e4-5',
+    source: '4',
+    target: '5',
+    label: 'edge with arrow head',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    type: 'smoothstep',
+    label: 'smooth step edge',
+  },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    type: 'step',
+    style: { stroke: '#f6ab6c' },
+    label: 'a step edge',
+    animated: true,
+    labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
+  },
+];

examples/react/src/examples/Redux/state.ts

@@ -0,0 +1,59 @@
+import { createSlice, configureStore } from '@reduxjs/toolkit';
+import { applyNodeChanges, applyEdgeChanges } from '@xyflow/react';
+import { nodes, edges } from './initial-elements';
+
+const initialState = {
+  nodes,
+  edges,
+  selectedNodes: [],
+  selectedEdges: [],
+};
+
+const setNodesReducer = (state, action) => {
+  state.nodes = action.payload;
+};
+
+const setEdgesReducer = (state, action) => {
+  state.edges = action.payload;
+};
+
+const onNodesChangeReducer = (state, action) => {
+  const a = applyNodeChanges(action.payload, state.nodes);
+  state.nodes = a;
+};
+
+const onEdgesChangeReducer = (state, action) => {
+  const a = applyEdgeChanges(action.payload, state.edges);
+  state.edges = a;
+};
+
+const setSelectedNodesAndEdgesReducer = (state, action) => {
+  state.selectedNodes = action.payload.nodes;
+  state.selectedEdges = action.payload.edges;
+};
+
+const setSelectedNodesReducer = (state, action) => {
+  state.selectedNodes = action.payload;
+};
+
+const MyApplicationSlice = createSlice({
+  name: 'MyApplication',
+  initialState,
+  reducers: {
+    setNodes: setNodesReducer,
+    setEdges: setEdgesReducer,
+    onNodesChange: onNodesChangeReducer,
+    onEdgesChange: onEdgesChangeReducer,
+    setSelectedNodesAndEdges: setSelectedNodesAndEdgesReducer,
+    setSelectedNodes: setSelectedNodesReducer,
+  },
+});
+
+export const { setNodes, setEdges, onNodesChange, onEdgesChange, setSelectedNodesAndEdges, setSelectedNodes } =
+  MyApplicationSlice.actions;
+
+export const store = configureStore({
+  reducer: {
+    myApplication: MyApplicationSlice.reducer,
+  },
+});

pnpm-lock.yaml

@@ -92,6 +92,9 @@ importers:
 
   examples/react:
     dependencies:
+      '@reduxjs/toolkit':
+        specifier: ^2.2.3
+        version: 2.2.3(react-redux@9.1.1)(react@18.2.0)
       '@xyflow/react':
         specifier: workspace:*
         version: link:../../packages/react
@@ -110,9 +113,15 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-redux:
+        specifier: ^9.1.1
+        version: 9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1)
       react-router-dom:
         specifier: ^6.18.0
         version: 6.18.0(react-dom@18.2.0)(react@18.2.0)
+      redux:
+        specifier: ^5.0.1
+        version: 5.0.1
       zustand:
         specifier: ^4.4.6
         version: 4.4.6(@types/react@18.2.36)(react@18.2.0)
@@ -2120,6 +2129,25 @@ packages:
     resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
     dev: true
 
+  /@reduxjs/toolkit@2.2.3(react-redux@9.1.1)(react@18.2.0):
+    resolution: {integrity: sha512-76dll9EnJXg4EVcI5YNxZA/9hSAmZsFqzMmNRHvIlzw2WS/twfcVX3ysYrWGJMClwEmChQFC4yRq74tn6fdzRA==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+    dependencies:
+      immer: 10.0.4
+      react: 18.2.0
+      react-redux: 9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1)
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.0
+    dev: false
+
   /@remix-run/router@1.11.0:
     resolution: {integrity: sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==}
     engines: {node: '>=14.0.0'}
@@ -3067,6 +3095,10 @@ packages:
     resolution: {integrity: sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==}
     dev: false
 
+  /@types/use-sync-external-store@0.0.3:
+    resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==}
+    dev: false
+
   /@types/yauzl@2.10.3:
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
     requiresBuild: true
@@ -6373,6 +6405,10 @@ packages:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
     dev: false
 
+  /immer@10.0.4:
+    resolution: {integrity: sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==}
+    dev: false
+
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -9057,6 +9093,28 @@ packages:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true
 
+  /react-redux@9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1):
+    resolution: {integrity: sha512-5ynfGDzxxsoV73+4czQM56qF43vsmgJsO22rmAvU5tZT2z5Xow/A2uhhxwXuGTxgdReF3zcp7A80gma2onRs1A==}
+    peerDependencies:
+      '@types/react': ^18.2.25
+      react: ^18.0
+      react-native: '>=0.69'
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react-native:
+        optional: true
+      redux:
+        optional: true
+    dependencies:
+      '@types/react': 18.2.36
+      '@types/use-sync-external-store': 0.0.3
+      react: 18.2.0
+      redux: 5.0.1
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
   /react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
@@ -9148,6 +9206,18 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /redux-thunk@3.1.0(redux@5.0.1):
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+    dependencies:
+      redux: 5.0.1
+    dev: false
+
+  /redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+    dev: false
+
   /reflect.getprototypeof@1.0.4:
     resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
     engines: {node: '>= 0.4'}
@@ -9265,6 +9335,10 @@ packages:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: true
 
+  /reselect@5.1.0:
+    resolution: {integrity: sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==}
+    dev: false
+
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}