Ekspo dengan Redux Toolkit, Sistem Fail dan Redux Persist: Panduan Komprehensif

Redux Toolkit ialah perpustakaan popular yang memudahkan pembangunan Redux dengan menyediakan satu set utiliti dan konvensyen. Ia termasuk pengurang dan corak penciptaan tindakan yang menyelaraskan proses menulis logik Redux. Menggabungkan Redux Persist dengan Redux Toolkit boleh meningkatkan kecekapan dan kebolehpercayaan pengurusan keadaan dengan ketara dalam apl React Native anda.

sistem fail ekspo menyediakan akses kepada sistem fail yang disimpan secara setempat pada peranti. Ia juga mampu memuat naik dan memuat turun fail daripada URL rangkaian

redux-perist-expo-file-system-storage ialah enjin storan untuk redux-persist yang menggunakan API Sistem Fail Expo. Ini membolehkan anda mengekalkan keadaan kedai Redux anda kepada sistem fail peranti, memastikan keadaan disimpan dan dipulihkan walaupun apl ditutup atau dimulakan semula.

Setelah anda mengkonfigurasi kedai Redux Toolkit anda, anda boleh menyepadukan Redux Persist. Mulakan dengan memasang kebergantungan yang diperlukan:

npm i @reduxjs/toolkit 
npm i expo-file-system 
npm i redux-persist-expo-file-system-storage
npm i redux-persist

kami mencipta kedai Redux mudah @reduxjs/toolkit untuk menguruskan keadaan kaunter. Kami mentakrifkan keadaan awal dengan kiraan 0 dan mencipta hirisan bernama kaunter dengan dua pengurang: kenaikan dan penurunan, yang masing-masing menambah dan mengurangkan kiraan sebanyak 1. Tindakan dan pengurang dieksport untuk digunakan dalam persediaan Redux kami, membolehkan kami mengurus keadaan kaunter dengan mudah sepanjang aplikasi.

// store/counter/counter.tsx
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  count: 0,
};

const counterSlice = createSlice({
  name: "couter",
  initialState,
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Kod ini menyediakan kedai Redux dalam apl React Native menggunakan @reduxjs/toolkit dan redux-perist dengan FileSystem Expo untuk storan berterusan. Ia menggabungkan pengurang, termasuk pengurang kaunter, dan memastikan keadaannya disimpan dan dimuatkan daripada direktori tertentu dalam sistem fail apl.

// store/ConfigureStore.js
import { combineReducers } from "@reduxjs/toolkit";
import { documentDirectory, EncodingType } from "expo-file-system";
import { createExpoFileSystemStorage } from "redux-persist-expo-file-system-storage";

import CounterReducer from "./counter/counter";
import { persistReducer } from "redux-persist";
console.log('Document Directory:',documentDirectory);
export const expoFileSystemStorage = createExpoFileSystemStorage({
  storagePath: `${documentDirectory}customPathName/`,
  encoding: EncodingType.UTF8,
  debug: true,
});
const persist = (key, reducer) =>
  persistReducer(
    {
      key,
      storage: expoFileSystemStorage,
    },
    reducer
  );

const combinePersistReducers = (keys) =>
  Object.keys(keys).reduce(
    (obj, key) => ({
      ...obj,
      [key]: persist(key, keys[key]),
    }),
    {}
  );

const reducers = combineReducers({
  ...combinePersistReducers({
    count: CounterReducer,
  }),
});

export default reducers;

Dalam bahagian persediaan ini, kami mengkonfigurasi dan mencipta gedung Redux menggunakan @reduxjs/toolkit. Kami mengimport rootReducer yang menggabungkan pengurang kami dan melumpuhkan perisian tengah SeriizableCheck untuk mengelakkan ralat bersiri daripada redux-berterusan. Kami juga menyediakan redux-perist untuk mendayakan ketekunan keadaan dan mengeksport kedua-dua kedai dan persistor untuk penyepaduan dengan aplikasi React Native kami. Konfigurasi ini memastikan keadaan apl kami dikekalkan walaupun selepas ditutup atau dimuat semula.

// store/index.js
import { configureStore } from "@reduxjs/toolkit";
import { persistStore } from "redux-persist";
import { Provider } from "react-redux";
import rootReducer from "./ConfigureStore";

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});
const persistor = persistStore(store);

export { store, persistor };

Dengan mengelog dan memahami laluan documentDirectory dalam fail configureStore, anda mendapat cerapan berharga tentang tempat data Redux Persist anda disimpan dalam persekitaran Ekspo. Pengetahuan ini bukan sahaja membantu dalam penyahpepijatan tetapi juga memastikan bahawa strategi kegigihan data anda adalah teguh dan selamat. Kini anda boleh mengurus keadaan apl anda dengan yakin, mengetahui dengan tepat di mana data anda berada.

Dalam direktori ini, redux-persist akan menyimpan keadaan berterusan anda. Biasanya, data berterusan disimpan dalam fail bernama persist-counter (atau sesuatu yang serupa, bergantung pada konfigurasi anda). Begini cara anda boleh menavigasi ke dan melihat fail ini:

// persist-count file

{"count":"0","_persist":"{\"version\":-1,\"rehydrated\":true}"}

Untuk contoh lengkap, anda boleh menyemak repositori GitHub untuk projek ini: Pautan Repositori GitHub

? Saya ingin mendengar pendapat anda tentang topik ini! Jika anda mempunyai sebarang soalan tentang menggunakan Sistem Fail Ekspo dengan Redux Persist, atau jika anda menghadapi sebarang masalah, sila berikan ulasan di bawah. Saya di sini untuk membantu! ?

Atas ialah kandungan terperinci Ekspo dengan Redux Toolkit, Sistem Fail dan Redux Persist: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!