TypeScript - איך אפשר לטפל ב-Zustand persist בבדיקות Jest שלי?
אני כרגע יוצר אפליקציית React Native באמצעות Zustand לניהול מצב שלי. ל-Zustand יש את היכולת לשמור את המצב לאחסון, במקרה שלי האחסון האסינכרוני של React Native. זה עובד טוב, אך כאשר אני מריץ בדיקות, העטיפה persist של Zustand גורמת לסדרת הבדיקה שלי ב-Jest להיכשל. קוד קצר של מצב ה-Zustand שלי:
קרא עוד →TypeScript - טיפוס של המתודה `set` מחנות Zustand עם תוספת Immer תוך שמירה על השלמה אוטומטית
יש לי בעיה להקליד את השיטה set מתוך החנות Zustand בעת שימוש במידלוור Immer. אני כן צריך להקליד אותה מכיוון שחלק מהתכונות מכילות פונקציות שעדכנו את המצב, ולכן הן זקוקות לפונקציית set:
export const useStore = create<Store>()( immer((set, get) => ({ func: beginDraggingVertex(set, get, vertexID) })) ) .... function beginDraggingVertex(set: Setter, get: Getter, vertexID: string) { ...ommited set((store) => // here is where I קרא עוד →reactjs - איך אני יוצר מכסה של hook ב-Typescript לבוחר חנות של Zustand
אני מנסה להשתמש ב-Zustand כחלופה ל-React Context כדי לספק מצב משותף בין תת-קבוצה של רכיבים, ואחד הדפוסים שאני מוצא את עצמי משתמש בו רבות הוא הסלקטור הרדוד עם תכונות מרובות, כך:
// store.ts interface State { data: object, setData: (newData: State['data']) קרא עוד →reactjs - שגיאה עם Zustand ו-Typesscript בעת שימוש ב-Persist. השגיאה היא: persist.d.ts(95, 210): לא סופק ארגומנט עבור 'options'
אני מנסה להשתמש בפונקציונליות השמירה באמצעות Zustand לפי הדפוס במדריך של Zustand עבור Typescript, אבל אני מקבל שגיאה כשאני מוסיף את שיטת persist.
השגיאה היא persist.d.ts(95, 210): לא סופק ארגומנט עבור 'options'.
הנה דוגמה של הקוד שי
קרא עוד →איך להשתמש בכלי הפיתוח של zustand עם TypeScript?
אני מנסה להשתמש בתכונת devtools של zustand. אני גם משתמש ב-TypeScript. כשאני מעביר את ה-store ל-devtools, כל קוד ה-store שלי נותן שגיאה כ: Argument of type 'StateCreator
הנה קוד החנות שלי:
const useUserStore = create<Store>(devtools((set) => ({ token: "", isLogged: false, loginUser: (jwtToken: string) =& קרא עוד →reactjs - איך להשתמש ב-zustand לניהול מצב גלובלי של אימות משתמש ב-next.js 13.4.9
יש לי את הקוד הבא באפליקציית Next.js 13.4.9 שלי (שמשתמשת ב-app router) ואני לא בטוח איך להשתמש ב-zustand בצורה יעילה לניהול מצב אימות גלובלי.
חנות Zustand:
// /src/store/AuthStore.ts import { create } from 'zustand'; import { persist } from 'zustand/middleware'; ty קרא עוד →TypeScript - שימוש בגנריים עם המתודה create של Zustand
יש לי חנות zustand שמכילה פריטים מסוג GridRow<T>. זה מייצג שורות שנבחרו ברשת הראשית, ולכן הוא משתמש בגנריים כדי לייצג את הנתונים הספציפיים המשמשים ברשת.
אני לא בטוח איך להעביר את הגנרי למתודת create של החנות. אני לא יכול לעטוף את זה בפונקציה אחרת כי זה ייצור חנות חדשה בכל פעם.
קרא עוד →reactjs - פונקציית מצב ב-zustand לשינוי תכונה אחת של אובייקט
אז אני משתמש ב-Zustand עם React באפליקציית ה-Electron שלי. אני משתמש בזה כדי לשלוף קצת נתונים ממסד הנתונים Dexie. זה רק ערך אחד והוא נשמר ל-state. אני מנסה לקבל את פונקציית set מהרכיב המוצג כדי להיות מסוגל לשנות את ה-state של התכונה המתאימה שלו ב-state. ב-React useState הקוד הזה עובד...
s קרא עוד →reactjs - הוסף ערכים למערך בתוך אובייקט במצב Zustand
יש לי אובייקט משתמש שנשמר במצב של Zustand והוא מכיל מערך עם רשימת הסרטים האהובים על המשתמש (החלונית הריקה מוחלפת בעת ההתחברות). עם זאת, מסיבה כלשהי, Zustand אינו מזהה את אובייקט המשתמש, וטוען שהוא לא קיים כשאני מנסה להשתמש בו בפונקציה setFavoriteMovie. אבל אפשר להבחין שהוא שם בצורה ברורה כפי שמוצג בק
קרא עוד →reactjs - איך לבצע Toggle באמצעות Zustand
יצרתי את החנות הבאה באמצעות Zustand:
import create from "zustand" const useStore = create((set) => ({ show: false, toggleShow: () => set((state) => ({ show: !state.show })), }))נחתי שאני יוכל לשנות את הערך של show באופן נכון. עם זאת, TypeScript לא מרוצה – יש קו אדום מתחת ל-show
קרא עוד →