Corak Slices dan Integrasi Devtools
Susun stor besar kepada slice logik menggunakan corak slice, kemudian tambahkan perisian tengah Zustand DevTools untuk penyahpepijatan perjalanan masa dalam pembangunan.
Corak Slices dan Integrasi Devtools ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Mengapa Menyusun Stor dengan Hirisan?
Apabila stor Zustand berkembang, menyimpan semua keadaan dan tindakan dalam satu objek menjadi sukar untuk diselenggara. Corak hirisan membahagikan stor kepada beberapa bahagian yang berfokus, setiap satunya ditakrifkan sebagai fungsi berasingan. Semua hirisan digabungkan menjadi satu stor, jadi komponen masih mengakses semuanya melalui satu cangkuk. Ini menyerupai konsep hirisan Redux Toolkit tetapi dalam gaya minimum Zustand.
Mentakrifkan Fungsi H irisan
Pecahan Zustand ialah fungsi yang menerima set, get dan secara pilihan pemula stor keseluruhan, lalu mengembalikan objek yang mengandungi keadaan serta tindakan untuk domain tersebut. Takrifkan setiap pecahan dalam file tersendiri dan importkannya ke dalam stor gabungan. Tandatangan fungsi pecahan adalah sama tepat dengan pencipta stor utama.
// slices/counterSlice.ts
import type { StateCreator } from 'zustand';
import type { AppStore } from '../useAppStore';
export interface CounterSlice {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
export const createCounterSlice: StateCreator<AppStore, [], [], CounterSlice> =
(set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
});Menggabungkan Pecahan Menjadi Satu Stor
Import semua fungsi pencipta pecahan anda dan gabungkannya dalam satu panggilan create menggunakan operator sebaran. Jenis stor gabungan ialah persilangan semua antara muka pecahan. Komponen kemudiannya boleh mengakses keadaan dan tindakan daripada mana-mana pecahan melalui cangkuk useAppStore yang sama.
// useAppStore.ts
import { create } from 'zustand';
import { createCounterSlice, CounterSlice } from './slices/counterSlice';
import { createUserSlice, UserSlice } from './slices/userSlice';
export type AppStore = CounterSlice & UserSlice;
export const useAppStore = create<AppStore>((set, get, api) => ({
...createCounterSlice(set, get, api),
...createUserSlice(set, get, api),
}));Komunikasi Merentas Pecahan
Pecahan boleh memanggil tindakan pecahan lain atau membaca keadaan pecahan lain menggunakan fungsi get. Dengan cara ini, satu pecahan boleh bertindak balas terhadap perubahan pecahan lain tanpa gandingan yang ketat. Sebagai contoh, pecahan troli boleh membaca token pengesahan daripada pecahan pengguna dan memasukkannya dalam permintaan API semasa membuat pembayaran.
export const createCartSlice: StateCreator<AppStore, [], [], CartSlice> =
(set, get) => ({
items: [],
checkout: async () => {
const token = get().user.token; // read from userSlice
await api.checkout(get().items, token);
set({ items: [] });
},
});Apakah Perantara DevTools Zustand?
Perantara devtools menyambungkan stor Zustand anda kepada sambungan pelayar Redux DevTools. Selepas disambungkan, anda boleh memeriksa setiap petikan keadaan, melihat nama tindakan yang mencetuskan setiap perubahan dan mengundur masa kembali ke mana-mana keadaan terdahulu. Perantara ini amat berguna untuk menyahpepijat urutan keadaan yang kompleks semasa pembangunan.
Menambah Perantara DevTools
Bungkus pencipta stor anda dengan perantara devtools yang diimport daripada zustand/middleware. Hantar objek konfigurasi pilihan dengan sifat name untuk melabelkan stor dalam panel DevTools. Dayakan DevTools hanya dalam pembangunan bagi mengelakkan beban prestasi dalam binaan produksi.
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
export const useCounterStore = create(
devtools(
(set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
reset: () => set({ count: 0 }),
}),
{ name: 'CounterStore' }
)
);Melabelkan Tindakan dalam DevTools
Secara lalai, DevTools melabelkan setiap perubahan keadaan sebagai anonymous. Hantar rentetan yang menerangkan tindakan sebagai argumen ketiga kepada set untuk memberikan setiap tindakan nama yang bermakna dalam garis masa DevTools. Dengan ini, lebih mudah untuk menjejak interaksi pengguna yang mencetuskan setiap perubahan keadaan.
increment: () =>
set(
(state) => ({ count: state.count + 1 }),
false, // false = merge (not replace)
'counter/increment' // action label in DevTools
),
reset: () =>
set({ count: 0 }, false, 'counter/reset'),Menggabungkan DevTools dengan Penyimpanan Berterusan
Apabila menggunakan kedua-dua persist dan devtools, bungkus stor dengan kedua-dua perantara tersebut. Susunannya penting: devtools hendaklah menjadi pembungkus paling luar supaya dapat memerhati semua perubahan keadaan, termasuk perubahan daripada pemulihan keadaan. Letakkan persist di dalam devtools untuk melihat tindakan pemulihan keadaan dalam garis masa DevTools.
import { create } from 'zustand';
import { persist, devtools, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';
export const useSettingsStore = create(
devtools(
persist(
(set) => ({ theme: 'light', setTheme: (t) => set({ theme: t }) }),
{ name: 'settings', storage: createJSONStorage(() => AsyncStorage) }
),
{ name: 'SettingsStore' }
)
);Pecahan dengan Penyimpanan Berterusan dan DevTools
Dalam aplikasi besar, gabungkan ketiga-tiga corak: pecahan untuk penyusunan, persist untuk penyimpanan dan devtools untuk penyahpepijatan. Bungkus objek pecahan yang digabungkan dengan persist dan devtools. Takrifkan jenis gabungan sebagai persilangan semua antara muka pecahan supaya TypeScript menaip stor penuh dengan betul.
export const useAppStore = create<AppStore>()(
devtools(
persist(
(set, get, api) => ({
...createCounterSlice(set, get, api),
...createUserSlice(set, get, api),
}),
{ name: 'app-store', storage: createJSONStorage(() => AsyncStorage) }
),
{ name: 'AppStore' }
)
);Konvensyen Penamaan untuk Pecahan
Gunakan penamaan yang konsisten supaya stor besar mudah dinavigasi. Namakan file pecahan mengikut domainnya, contohnya authSlice.ts dan cartSlice.ts, letakkan awalan domain pada nama tindakan dalam label DevTools, contohnya auth/login dan cart/addItem, serta pastikan setiap pecahan tidak melebihi 100 lines. Pecahkan lagi jika sesuatu pecahan mula mengendalikan perkara yang tidak berkaitan.
Bila Tidak Perlu Menggunakan Pecahan
Corak pecahan menambahkan kerumitan. Jika stor anda mempunyai kurang daripada lima medan keadaan serta dua atau tiga tindakan, kekalkannya sebagai satu panggilan create — beban memecahkannya tidak berbaloi. Simpan penggunaan pecahan untuk stor yang sudah berkembang sehingga satu file sukar difahami, atau apabila beberapa pembangun mengerjakan ciri berbeza yang berkongsi stor yang sama.
Semakan Pantas
Uji pemahaman anda tentang konsep Pembangunan Aplikasi Mudah Alih React Native daripada pelajaran ini.
Rumusan Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa corak pecahan membahagikan stor Zustand yang besar kepada fungsi domain yang berfokus, kemudian menggabungkannya dalam satu panggilan create; perantara devtools menyambungkan stor kepada Redux DevTools untuk pemeriksaan keadaan dan pengunduran masa; serta pelabelan panggilan set dengan rentetan nama tindakan menjadikan garis masa DevTools lebih bermakna. Seterusnya, kita akan meneroka cara membaca dan menulis secara terus menggunakan AsyncStorage.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Corak Slices dan Integrasi Devtools” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Corak Slices dan Integrasi Devtools”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Corak Slices dan Integrasi Devtools”?
Susun stor besar kepada slice logik menggunakan corak slice, kemudian tambahkan perisian tengah Zustand DevTools untuk penyahpepijatan perjalanan masa dalam pembangunan. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Corak Slices dan Integrasi Devtools” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?
Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Mencipta Stor Zustand
- Membaca dan Mengemas Kini Keadaan Stor dalam Komponen
- Mengekalkan Keadaan Zustand dengan AsyncStorage
- Corak Slices dan Integrasi Devtools