ترکیب redux و dexie
سلام امیدوارم حالتون خوب باشه
بچه ها چطور میشه کتابخونه dexie که مربوط به indexedDB هستش رو با redux ترکیب کنیم؟!
initialState یک slice رو چطور میشه با دیتاهای دیتابیس لوکال پر کرد؟
ممنون میشم راهنمایی کنید.
پاسخها
6
@sinashahoveisi
به این شکل پیاده سازیش کردم
categoriesSlice.js
...
export const categories = createAsyncThunk(
"categories/getCategoriesDB",
async (arg, thunkAPI) => {
try {
const res = await db.categories.toArray();
return res;
} catch (error) {
return thunkAPI.rejectWithValue(error);
}
}
);
...
export const categoriesSlice = createSlice({
name: "categories",
initialState,
extraReducers: {
[categories.pending]: (state) => {
state.isLoading = true;
},
[categories.fulfilled]: (state, action) => {
state.isLoading = false;
state.categories = action.payload;
},
[categories.rejected]: (state, action) => {
state.isLoading = false;
state.error = action.payload;
},
},
});app.js
...
const dispatch = useDispatch();
useEffect(() => {
dispatch(categories());
}, []);تشکر بابت راهنماییتون🌹🙂
سلام
برای ذخیره کردن یا عملیات persist کردن میتونید از redux-persist استفاده کنید که توی localstorage ذخیره میکنه.
اما اگه حتما خواستید توی indexedDB ذخیره کنید میتونید از پکیج redux-persist-indexeddb-storage استفاده کنید که توی این لینک هم میتونید یک مثال ازش ببینید.
اگه بخواهید خودتون پیاده سازی کنید هم کاری نداره توی useEffect کامپوننت APP پروژه میتونید با dexie دیتا رو بخونید و state جدید رو ذخیره کنید یا اینکه میتونید توی همون initialState توی فایل reducer هم بگیرید و به عنوان state اولیه استفاده کنید
const initialState = {
categories: [],
};
const categories = async () => await db.categories.toArray();
categories().then((res) => initialState.categories.push(...res));وقتی از دیتابیس یک جدول رو فرا میخونم ی پرامیس برمیگردنه... ولی نمیدونم چرا با این ارور مواجه میشه
index.js:17 Uncaught (in promise) TypeError: Cannot add property 0, object is not extensible
at Array.push (<anonymous>)گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
سلام خب مشخصه توی reducer داری یه کار زمانبر رو انجام میدی.
باید اینکار رو توی کامپوننت APP و توی useEffect صدا بزنی که هر موقع اومد load شد و از دیتابیس گرفت نتیجه رو توی state ذخیره کنی
@sinashahoveisi
پس مابقی عملیات ها چی؟!
مثل add، remove، put و ... کردن توی دیتابیس
اونا رو هم خارج از reducer باید نوشت؟!
بله همه این عملیات ها به صورت async انجام میشوند. باید مثل ارسال درخواست به سرور با آن ها رفتار شود. یعنی ذخیره کنید وقتی ذخیره شد state رو تغییر بدید یا اینکه از ابزارها aync برای redux مثل redux-thunk یا redux-saga استفاده کنید.