Bir Next uygulamasında karmaşık durumları yönetirken, işler hızla zorlaşabilir. Gibi geleneksel kancalar kullanımDevlet devlet yönetimine yardımcı olur, ancak bir pervane sondajı sorunu sunar. Pervane sondajı, verilerin veya işlevlerin çeşitli bileşenlerden geçirilmesi anlamına gelir.

Durum yönetimi mantığınızı bileşenlerden ayırmak ve bu durumları uygulamanızın herhangi bir yerinden güncellemek daha iyi bir yaklaşım olacaktır. Basit bir yapılacaklar listesi uygulaması oluştururken, Bağlam API'sini nasıl kullanacağınız konusunda size yol göstereceğiz.

Yapılacaklar Listenize Başlamadan Önce

Yapılacaklar listesi uygulamasını oluşturmadan önce şunlara ihtiyacınız olacak:

  • temel bilgi modern JavaScript operatörleri Ve React'in useState kancası.
  • Nasıl yapılacağına dair bir anlayış JavaScript'te dizileri ve nesneleri yok etme.
  • düğüm Yerel makinenizde v16.8 veya üstü yüklü ve aşinalık npm gibi paket yöneticileri veya iplik.

Bitmiş projeyi adresinde bulabilirsiniz. GitHub referans ve daha fazla keşif için.

instagram viewer

Uygulama Durumunu ve Yönetimini Anlamak

Uygulama durumu, bir uygulamanın belirli bir zamanda mevcut durumunu ifade eder. Buna, kullanıcı girişi ve bir veritabanından veya bir API'den (Uygulama Programlama Arayüzü) getirilen veriler gibi uygulamanın bildiği ve yönettiği bilgiler dahildir.

Uygulama durumunu anlamak için basit bir sayaç uygulamasının olası durumlarını göz önünde bulundurun. Onlar içerir:

  • varsayılan durum sayaç sıfır olduğunda.
  • Yükseltilmiş bir durum sayaç bir arttığında.
  • Azalmış bir durum sayaç bir azaldığında.
  • Bir sıfırlama durumu sayaç varsayılan durumuna döndüğünde.

Bir React bileşeni, durum değişikliklerine abone olabilir. Bir kullanıcı böyle bir bileşenle etkileşime girdiğinde, eylemleri (düğme tıklamaları gibi) durum güncellemelerini yönetebilir.

Bu snippet, varsayılan durumunda, tıklama eylemlerine dayalı olarak durumu yöneten basit bir sayaç uygulamasını gösterir:

sabit [sayaç, setCounter] = useState(0);
geri dönmek (

{karşı}/h1>

Kurulum ve Kurulum

Projenin deposu iki dal içerir: başlangıç Ve bağlam. Projeyi oluşturmak için başlangıç ​​dalını temel olarak veya son demoyu önizlemek için bağlam dalını kullanabilirsiniz.

Başlangıç ​​Uygulamasını Klonlama

Başlangıç ​​uygulaması, son uygulama için ihtiyaç duyacağınız kullanıcı arayüzünü sağlar, böylece temel mantığın uygulanmasına odaklanabilirsiniz. Bir terminal açın ve deponun başlangıç ​​dalını yerel makinenize klonlamak için aşağıdaki komutu çalıştırın:

git klon -b marş https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Bağımlılıkları yüklemek ve geliştirme sunucunuzu başlatmak için proje dizini içinde aşağıdaki komutu çalıştırın:

yarn && yarn dev

Veya:

npm i && npm dev çalıştır

Her şey yolunda giderse, kullanıcı arayüzünün tarayıcınızda görüntülenmesi gerekir:

Mantığı Uygulamak

Bağlam API'si, manüel dikme delmeye gerek kalmadan durum verilerini bileşenler arasında yönetmenin ve paylaşmanın bir yolunu sunar.

1. Adım: Bağlam Oluşturun ve Dışa Aktarın

Oluşturmak kaynak/uygulama/bağlam bağlam dosyasını depolamak ve proje dizinini iyi organize etmek için klasör. Bu klasör içinde bir todo.context.jsx uygulama için tüm bağlam mantığını içerecek dosya.

içe aktar Bağlam oluştur işlevi tepki kütüphane ve onu çağırın, sonucu bir değişkende saklayın:

içe aktarmak {bağlam oluştur} itibaren"tepki";
sabit TodoContext = createContext();

Ardından, bir özel oluşturun useTodoContext dönen kanca TodoContext kullanılabilir şekliyle.

ihracatsabit useTodoContext = () => useContext (TodoContext);

2. Adım: Durumları Oluşturun ve Yönetin

Uygulamanın CRUD (Oluştur, Oku, Güncelle, Sil) eylemlerini gerçekleştirmek için durumları oluşturmanız ve Sağlayıcı bileşen.

sabit TodoContextProvider = ({ çocuklar }) => {
sabit [görev, setTask] = useState("");
sabit [görevler, setTasks] = useState([]);
geri dönmek<TodoContext. Sağlayıcıdeğer={{}}>{çocuklar}TodoContext. Sağlayıcı>;
};
ihracatvarsayılan TodoContextSağlayıcı;

hemen önce geri dönmek deyimi, oluşturmak koluYapılacakGiriş kullanıcı bir yapılacak iş yazdığında çalışacak işlev. Bu işlev daha sonra görev durum.

sabit handleTodoInput = (giriş) => görev ayarla (giriş);

Ekle görev oluştur bir kullanıcı bir yapılacak iş gönderdiğinde çalışacak işlev. Bu fonksiyon günceller görevler durum ve yeni göreve rastgele bir kimlik atar.

sabit görev oluştur = (e) => {
 e.preventDefault();
 Görevleri ayarla([
 {
 İD: Matematik.trunc(Matematik.rastgele() * 1000 + 1),
 görev,
 },
 ...görevler,
 ]);
 };

Oluşturduğunuz bir güncellemeGörevi aracılığıyla eşlenen işlev görevler kimliği tıklanan görevin kimliğiyle eşleşen görevi listeler ve günceller.

sabit güncellemeGörevi = (kimlik, updateText) =>
 setTasks (görevler.map((T) => (kimlik kimliği? { ...T, görev: updateText }: t));

Oluşturmak silGörev güncelleyen işlev görevler kimliği verilen parametreyle eşleşmeyen tüm görevleri içerecek şekilde listeleyin.

sabit silmeGörevi = (İD) => setTasks (görevler.filter((T) => t.id !== id));

Adım 3: Sağlayıcıya Durumlar ve İşleyiciler Ekleyin

Artık durumları oluşturdunuz ve bunları yönetmek için kod yazdınız, bu durumları ve işleyici işlevlerini kullanıcının kullanımına sunmanız gerekir. Sağlayıcı. kullanarak bunları bir nesne biçiminde sağlayabilirsiniz. değer mülkiyeti Sağlayıcı bileşen.

geri dönmek (
 değer={{
 görev,
 görevler,
 işlenecekTodoInput,
 görev oluştur,
 güncellemeGörevi,
 silmeGörevi,
 }}
 >
 {çocuklar}
 </TodoContext.Provider>
);

4. Adım: Bağlamı Kapsamlayın

bu Sağlayıcı Bağlamı uygulamanın tamamı için kullanılabilir hale getirmek için oluşturduğunuz üst düzey bileşeni sarmanız gerekir. Bunu yapmak için düzenleyin src/uygulama/sayfa.jsx ve sarın Yapılacak işler ile bileşen TodoContextProvider bileşen:


;
</TodoContextProvider>;

5. Adım: Bileşenlerde Bağlamı Kullanın

Düzenle src/app/components/Todos.jsx dosya ve imha görevler, görev, koluYapılacakGiriş, Ve görev oluştur telefonla arayarak useTodoContext işlev.

sabit { görev, görevler, handleTodoInput, createTask } = useTodoContext();

Şimdi, gönderme olayını ve ana giriş alanındaki değişiklikleri işlemek için form öğesini güncelleyin:

 createTask (e)}>
"yapılacak girdi" tür="metin" yer tutucu="Bir görev girin" gerekli değer={görev} onChange={(e) => handleTodoInput (e.target.value)} />
"yapılacak işi gönder" tür="göndermek" değer="Görev ekle" />
</form>

6. Adım: Görevleri Kullanıcı Arayüzünde Oluşturun

Artık uygulamayı bir görev oluşturmak ve görev eklemek için kullanabilirsiniz. görevler liste. Görüntüyü güncellemek için, mevcut görevler ve bunları kullanıcı arayüzünde oluşturun. İlk önce bir oluştur src/app/components/Todo.jsx tek bir yapılacak iş öğesini tutmak için bileşen.

İçinde src/app/components/Todo.jsx çağırarak bir görevi düzenleyin veya silin. güncellemeGörevi Ve silGörev oluşturduğumuz fonksiyonlar src/app/context/todo.context.jsx dosya.

içe aktarmak Tepki, { useState } itibaren"tepki";
içe aktarmak { useTodoContext } itibaren"../bağlam/todo.bağlam";
sabit Yapılacak = ({ görev }) => {
sabit { updateTask, deleteTask } = useTodoContext();


// isEdit durumu, bir görev düzenleme modundayken izlenir
sabit [isEdit, setIsEdit] = kullanımDevlet(YANLIŞ);


geri dönmek (

"yapılacak iş sarmalayıcı">


 {Düzenle? ( <giriştip="metin"değer={görev.görev}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
 (<incisınıf adı="görev">{görev.görev}inci> )}



"hareketler">






ihracatvarsayılan Yapmak;

işlemek için src/app/components/Todo.jsx her biri için bileşen görev, içine git src/app/components/Todos.jsx dosya ve aracılığıyla koşullu eşleme görevler hemen sonra başlık kapanış etiketi.

{görevler && (

 {görevler.harita((görev, ben) => ( <Yapmakanahtar={Bence}görev={görev} /> ))}
</main>
)}

Uygulamanızı bir tarayıcıda test edin ve beklenen sonucu verdiğini onaylayın.

Görevleri Yerel Depolama Alanına Kaydetme

Şu anda, sayfayı yenilemek, oluşturduğunuz görevleri atarak görevleri sıfırlayacaktır. Bu sorunu çözmenin bir yolu, görevleri tarayıcının yerel deposunda depolamaktır.

Web depolama API'si, hem kullanıcılar hem de geliştiriciler için deneyimi iyileştiren özelliklere sahip, çerez depolamada bir gelişmedir.