Mengurus keadaan global dalam aplikasi JavaScript, terutamanya apabila anda memerlukannya boleh diakses merentas kedua-dua konteks React dan bukan React, boleh menjadi mencabar. Perpustakaan sedia ada selalunya melibatkan persediaan yang berat, kerumitan yang tidak perlu dan digabungkan dengan React. Tetapi bagaimana jika anda boleh menguruskan keadaan dengan keanggunan dan kesederhanaan lipatan kertas? Masukkan Origami-State-Manager (OSM).
Origami-State-Manager (OSM), disebut "hebat," ialah perpustakaan pengurusan negeri ringan yang direka bentuk untuk ringkas, fleksibel dan berskala. Diinspirasikan oleh seni Origami Jepun, yang mengubah helaian kertas biasa kepada reka bentuk yang rumit, OSM membolehkan anda menguruskan keadaan global aplikasi anda dengan keanggunan yang sama. Sama seperti kertas, ia sangat ringan, menjadikannya sesuai untuk aplikasi yang mementingkan kesederhanaan dan prestasi.
Perjalanan untuk membina OSM bermula sebagai mencari penyelesaian yang boleh:
Jika anda bosan dengan penyelesaian yang terlalu direkayasa dan inginkan sesuatu yang hanya berfungsi, OSM mungkin alat "hebat" yang anda perlukan.
Bersedia untuk menambahkan sedikit OSM pada apl anda? Begini cara untuk bermula:
1. Pasang Perpustakaan:
npm install origami-state-manager
2. Cipta Kedai:
Kedai ialah tempat tinggal semua negeri global anda. Menyediakan satu adalah semudah menghantar nilai keadaan awal anda kepada createStore:
// store.ts import { createStore } from "origami-state-manager"; const initialValues = { origami: 0, osmness: 0, }; export const store = createStore(initialValues);
Anda juga boleh menjadikan kedai itu berterusan dengan memberikan nama kedai:
export const store = createStore(initialValues, "myOSMness");
3. Akses dan Keadaan Kemas Kini:
Untuk komponen React, gunakan cangkuk useStateListener untuk mengakses dan mengemas kini keadaan:
import { store } from "./store"; import { useStateListener } from "origami-state-manager"; function OrigamiComponent() { const origami = useStateListener("origami", store); return ( <button onClick={() => store["origami"].value = new Date().getSeconds()}> Origami Count: {origami} </button> ); }
4. Keadaan Akses dalam Fungsi Bukan Reaksi:
Anda boleh bekerja dengan mudah dengan keadaan di luar React juga:
// utils.js function getProfile() { let profile = store["profile"].value; if (!profile) { store["profile"].value = {}; } return store["profile"].value; }
OSM sesuai untuk senario di mana:
OSM masih di peringkat awal dan belum diuji sepenuhnya dalam semua persekitaran. Walaupun ia sesuai untuk projek yang lebih kecil dan keperluan keadaan yang mudah, anda dinasihatkan untuk berhati-hati apabila menggunakannya dalam senario yang kompleks. Jika anda menghadapi sebarang isu, sila laporkan supaya perpustakaan boleh terus bertambah baik.
Berminat untuk membantu menjadikan OSM lebih hebat? Sumbangan dialu-alukan! Lihat garis panduan sumbangan untuk bermula.
Log perubahan sentiasa dikemas kini dengan semua perubahan dan peningkatan baharu.
Origami-State-Manager (OSM) menyasarkan untuk menyediakan penyelesaian yang mudah tetapi berkuasa kepada pengurusan negeri global tanpa masalah. Dengan memastikan persediaan minimum dan prestasi tinggi, OSM membolehkan anda menumpukan pada ciri binaan dan bukannya bergelut dengan kerumitan keadaan.
Cubalah dan alami tahap baharu OSM-ness dalam projek anda!
Mulakan dengan OSM hari ini: npm: origami-state-manager
Atas ialah kandungan terperinci Memperkenalkan Origami-State-Manager (OSM): Perpustakaan Pengurusan Negeri Ringan dengan Boilerplate Minimum. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!