React Spreadsheet mit Redux Toolkit

Dieses Tutorial zeigt, wie Sie Tabellendaten in einem Redux-Toolkit-Store verwalten.

Voraussetzungen

• Kenntnisse in React, TypeScript und den Grundlagen von Redux Toolkit
• Abgeschlossene Anleitung Grundlagen der Zustandsverwaltung

Einrichtung

Erstellen Sie ein Vite-Projekt und installieren Sie die Abhangigkeiten:

npm create vite@latest my-rtk-spreadsheet -- --template react-ts
cd my-rtk-spreadsheet
npm install @dhtmlx/trial-react-spreadsheet @reduxjs/toolkit react-redux

Slice erstellen

Definieren Sie die Statusstruktur der Tabellenkalkulation, die Anfangsdaten und die Reducer in einem Redux-Toolkit-Slice.

src/store/spreadsheetSlice.ts

import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
import type { SheetData } from "@dhtmlx/trial-react-spreadsheet";

interface SpreadsheetState {
    sheets: SheetData[];
    activeSheet: string;
}

const initialState: SpreadsheetState = {
    sheets: [
        {
            id: "sheet1",
            name: "Data",
            cells: {
                A1: { value: "Product", css: "bold" },
                B1: { value: "Price", css: "bold", format: "currency" },
                A2: { value: "Widget" },
                B2: { value: 25.99, format: "currency" },
            },
        },
    ],
    activeSheet: "sheet1",
};

const spreadsheetSlice = createSlice({
    name: "spreadsheet",
    initialState,
    reducers: {
        setSheets(state, action: PayloadAction<SheetData[]>) {
            state.sheets = action.payload;
        },
        setActiveSheet(state, action: PayloadAction<string>) {
            state.activeSheet = action.payload;
        },
        updateCell(
            state,
            action: PayloadAction<{ sheetId: string; cell: string; value: string | number }>
        ) {
            const { sheetId, cell, value } = action.payload;
            const sheet = state.sheets.find((s) => s.id === sheetId);
            if (sheet) {
                sheet.cells[cell] = { ...sheet.cells[cell], value };
            }
        },
    },
});

export const { setSheets, setActiveSheet, updateCell } = spreadsheetSlice.actions;
export default spreadsheetSlice.reducer;

Store konfigurieren

Registrieren Sie den Slice im Redux-Store und exportieren Sie die typisierten Hilfsfunktionen RootState und AppDispatch.

src/store/index.ts

import { configureStore } from "@reduxjs/toolkit";
import spreadsheetReducer from "./spreadsheetSlice";

export const store = configureStore({
    reducer: {
        spreadsheet: spreadsheetReducer,
    },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Umschliessen Sie Ihre App mit dem Provider:

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>
);

Komponente erstellen

Verbinden Sie ReactSpreadsheet mit dem Redux-Store mithilfe von useSelector zum Lesen des Status und useDispatch, um Anderungen nach jeder Benutzeraktion zuruckzusynchronisieren.

src/App.tsx

import { useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";
import type { RootState } from "./store";
import { setSheets } from "./store/spreadsheetSlice";

const styles = {
    bold: { "font-weight": "bold" },
};

function App() {
    const ref = useRef<SpreadsheetRef>(null);
    const dispatch = useDispatch();
    const sheets = useSelector((state: RootState) => state.spreadsheet.sheets);
    const activeSheet = useSelector((state: RootState) => state.spreadsheet.activeSheet);

    const handleAfterAction = () => {
        const data = ref.current?.instance?.serialize();
        if (data?.sheets) {
            dispatch(setSheets(data.sheets));
        }
    };

    return (
        <div style={{ width: "100%", height: "100vh" }}>
            <ReactSpreadsheet
                ref={ref}
                sheets={sheets}
                styles={styles}
                activeSheet={activeSheet}
                onAfterAction={handleAfterAction}
            />
        </div>
    );
}

export default App;

Daten per Ref lesen

Verwenden Sie ref.current.instance fur schreibgeschutzte Operationen wie Serialisierung oder das Abrufen von Zellenwerten:

const handleExport = () => {
    const data = ref.current?.instance?.serialize();
    // An API senden, herunterladen usw.
};

const getCellValue = (cell: string) => {
    return ref.current?.instance?.getValue(cell);
};

Verwandte API und Anleitungen

• Props-Referenz - alle Komponenten-Props
• Events-Referenz - Event-Callback-Props
• Grundlagen der Zustandsverwaltung - Kernmuster