MongoDB Datenbank in Zustand integrieren

[JoaLehma]

Hallo zusammen,

im Moment habe ich in Zustand eine Art Default-Dummy-Datenbank mit 3-4 Listeneinträgen sowie mehreren Funktionen wie zb Add oder Delete. Das ganze schaut so aus (habs mal als Bild eingefügt da github das irgendwie nicht korrekt formatiert):

Funktioniert soweit auch alles wie gewünscht. Mir fehlt gerade aber irgendwie der Ansatz wie ich das nun mit Zustand und MongoDB so hinbekomme, dass in "items" meine ausgelagerten Items aus der MongoDB Datenbank landen.
Hat hier irgendjemand eine Lösungsansatz oder ein Beispiel wie ich das machen kann?
Über Google oder hier im Discussions-Board bin ich bisher leider nicht fündig geworden.

Vielen Dank.

[mpagels]

Ich vermute, dass du zustand zum größten Teil mit einem Backend ersetzen musst, der die Kommunikation mit deiner MongoDB macht.
addItem ist dann keine function mehr in deinem zustand Store, sondern eine function die abläuft, wenn du einen gewissen endpoint auf deinem Backend anrufst. (Und natürlich die Daten mitschickst, die du gelöscht haben willst).

Zustand hält dann nur noch global deine Items aus der Datenbank.

Pseudocode:

• Das Frontend wird geöffnet
• Das Frontend fragt dein Backend nach den Daten
• Dein Backend, schaut in der MongoDB nach den Daten und schickt sie ans Frontend
• Das Frontend speichert die Daten in Zustand

Das Frontend will ein Item löschen

• Das Frontend schickt eine DELETE method ans Backend z.B.: http://localhost:3000/api/deleteItem/5
• Das Backend schaut nach, ob es ein Item mit der ID 5 findet und löscht es aus der MongoDB, und schickt die geupdatet Datenbank zurück ans Frontend
• Das Frontend updated den Store mit den neuen Infos vom Backend

Das Frontend will ein Item hinzufügen

• Das Frontend schickt eine POST method ans Backend z.B. http://localhost:3000/api/add/ mit JSON als body (also die Daten die du in die Mongo speichern willst
• Das Backend nimmt die Daten und speichert sie in die MongoDB und schickt die geupdatet Datenbank zurück ans Frontend
• Das Frontend updated den Store mit den neuen Infos vom Backend

Hoffe das hilft.

[JoaLehma]

Ok, wenn ich das also richtig verstanden habe, dann gibts keine Möglichkeit die CRUD-Operations irgendwie in Zustand zu integrieren?
Sondern ich muss die ganzen Funktionalitäten auslagern und Zustand dient dann nur noch als Globaler Store in dem meine aktuellen Items aus der Datenbank liegen?
Wenn dem so ist, stellt sich mir noch die Frage, wie ich meine stets aktualisierten Items in Zustand bekomme? 🤔🤓

[mpagels]

Genau, die CRUD Operations finden dann im Backend statt, die mit der Datenbank kommuniziert und nicht mehr in Zustand. In Zustand hast du dann dein Array Itemlist, welches die Daten aus der Datenbank speichert und die Fetch Methode (POST/GET/UDPATE, usw.), die du aufrufen kannst, um mit deinem Backend zu kommunizieren und gegebenfalls dein Itemlist Array zu aktualisieren.

Beispiel:

• Du hast in zustand eine POST Methode, nennen wir sie addItem. Sie postet zu deinem Backend und schickt die Daten als JSON mit, die in deine MongoDB eingetragen werden soll.
• Dein Backend macht die CRUD Operation CREATE und erstellt in deiner Datenbank den Eintrag und schickt dir eine Antwort zurück, mit dem Inhalt, ob die Operation erfolgreich war oder nicht UND schickt dir eine neue Liste von Items, mit dem neuen Eintrag.
• Deine POST Medthode aus zustand, wartet auf die Antwort und wenn ein Erfolg zurück gemeldet wird, updatest du deine Itemlist mit den ebenfalls zurück geschickten Liste von der Antwort mit der set methode von zustand.

[doemser]

Du kannst das weiterhin in zustand handlen. Deine CRUD-Operations sind fetches und fetchen kannst du aus deinem useStore.

Hier ein Prototype zum Fetching mit der get-method in zustand, du kannst aber fetch functions mit jeder method in deinem useStore lagern und von überall aus deiner App, z.B. in einem useEffect, der auf irgendeine dependency hört, auf sie zugreifen :
https://codesandbox.io/s/fetching-with-zustand-js-0yopeo?file=/src/App.jsx

Schau mal ob du dich damit zurecht findest.