Move statemangement to zustand

[mikebarkmin]

We better performance and overall better handling, we should move to zustand.

Here is the documentation on how to integrate it: https://reactflow.dev/learn/advanced-use/state-management

This would enable us to update nodes individually and not to pass function around.

We can also use the integrated persisting store middleware (https://zustand.docs.pmnd.rs/integrations/persisting-store-data).

Example:

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

type BearStore = {
 bears: number
 addABear: () => void
}

export const useBearStore = create<BearStore>()(
 persist(
 (set, get) => ({
 bears: 0,
 addABear: () => set({ bears: get().bears + 1 }),
 }),
 {
 name: 'food-storage', // name of the item in the storage (must be unique)
 },
 ),
)

There is also zustand undo (https://github.com/charkour/zundo). So we do not need to rely on a custom implementation.

Example

import { create } from 'zustand';
import { temporal } from 'zundo';

// Define the type of your store state (typescript)
interface StoreState {
 bears: number;
 increasePopulation: () => void;
 removeAllBears: () => void;
}

// Use `temporal` middleware to create a store with undo/redo capabilities
const useStoreWithUndo = create<StoreState>()(
 temporal((set) => ({
 bears: 0,
 increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
 removeAllBears: () => set({ bears: 0 }),
 })),
);

import { useStoreWithEqualityFn } from 'zustand/traditional';
import type { TemporalState } from 'zundo';

function useTemporalStore(): TemporalState<MyState>;
function useTemporalStore<T>(selector: (state: TemporalState<MyState>) => T): T;
function useTemporalStore<T>(
 selector: (state: TemporalState<MyState>) => T,
 equality: (a: T, b: T) => boolean,
): T;
function useTemporalStore<T>(
 selector?: (state: TemporalState<MyState>) => T,
 equality?: (a: T, b: T) => boolean,
) {
 return useStoreWithEqualityFn(useStoreWithUndo.temporal, selector!, equality);
}

const App = () => {
 const { bears, increasePopulation, removeAllBears } = useStoreWithUndo();
 // changes to pastStates and futureStates will now trigger a reactive component rerender
 const { undo, redo, clear, pastStates, futureStates } = useTemporalStore(
 (state) => state,
 );

 return (
 <>
 <p> bears: {bears}</p>
 <p> pastStates: {JSON.stringify(pastStates)}</p>
 <p> futureStates: {JSON.stringify(futureStates)}</p>
 <button onClick={() => increasePopulation}>increase</button>
 <button onClick={() => removeAllBears}>remove</button>
 <button onClick={() => undo()}>undo</button>
 <button onClick={() => redo()}>redo</button>
 <button onClick={() => clear()}>clear</button>
 </>
 );
};

For this we would probably create a store.ts file, which should contain all actions.

Here is an example. We want to manage the RoadmapData state instead of nodes and edges individually.

const useStore = create<AppState>((set, get) => ({
 nodes: initialNodes,
 edges: initialEdges,
 onNodesChange: (changes) => {
 set({
 nodes: applyNodeChanges(changes, get().nodes),
 });
 },
 onEdgesChange: (changes) => {
 set({
 edges: applyEdgeChanges(changes, get().edges),
 });
 },
 onConnect: (connection) => {
 set({
 edges: addEdge(connection, get().edges),
 });
 },
 setNodes: (nodes) => {
 set({ nodes });
 },
 setEdges: (edges) => {
 set({ edges });
 },
 updateNodeColor: (nodeId, color) => {
 set({
 nodes: get().nodes.map((node) => {
 if (node.id === nodeId && isColorChooserNode(node)) {
 // it's important to create a new object here, to inform React Flow about the changes
 return { ...node, data: { ...node.data, color } };
 }

 return node;
 }),
 });
 },
}));

export default useStore;