ترکیب redux و dexie

سلام
برای ذخیره کردن یا عملیات persist کردن میتونید از redux-persist استفاده کنید که توی localstorage ذخیره میکنه.
اما اگه حتما خواستید توی indexedDB ذخیره کنید میتونید از پکیج redux-persist-indexeddb-storage استفاده کنید که توی این لینک هم میتونید یک مثال ازش ببینید.
اگه بخواهید خودتون پیاده سازی کنید هم کاری نداره توی useEffect کامپوننت APP پروژه میتونید با dexie دیتا رو بخونید و state جدید رو ذخیره کنید یا اینکه میتونید توی همون initialState توی فایل reducer هم بگیرید و به عنوان state اولیه استفاده کنید

@sinashahoveisi

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 استفاده کنید.

@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());
  }, []);

تشکر بابت راهنماییتون🌹🙂