Context API ve useReducer: State Yönetimi:

React’ta bulunan nested yapının bir sonucu olarak componentler arası props(properties) geçirme ihtiyacı duyarız ve props drilling yöntemi ile üst seviye componentlerden alt seviye componentlere propslarımızı geçirebiliriz.

Props drilling için bir kullanım örneği verecek olursak, bir button componenti oluşturup, kullanacağımız varyantları ‘theme’ isimli bir property’e koşullarla bağlayabiliriz. Böylelikle uygulamamızda kullanacağımız her button için tek bir componenti props drilling yöntemiyle çağırmış oluruz.

<Button theme=”primary”> Giriş yap </Button>
<Button theme=”secondary”> Çıkış yap </Button>

Theme, data, state gibi birçok olay için props drilling yöntemi kullanılabilir.

Props drilling ile state geçirmek için bir kullanım örneği verecek olursak: App.js dosyamız içinde bir yapılacaklar listemizi temsil eden List.js, onun içinde ise yapılacaklar için oluşturduğumuz component olan Todo.js olsun. Eğer parent App.js dosyamızdan child Todo.js dosyasına state geçirecek olsaydık, önce bunu List.js isimli dosyaya, daha sonra Todo.js dosyasına geçirebilirdik. Büyük projelerde component ağacını daha karışık ve uzun olduğundan bu büyük bir problem haline gelirdi.

Ayrıca alt seviye componentlerden üst seviye componentlere bir props, state göndermemiz mümkün değildir ve bu tarz senaryolarla da karşılaşabiliriz.

Props drilling yönteminin yetersiz geldiği durumlarda state yönetimi kullanılır.

State yönetimi her seferinde yüksek seviye componentlerden alt seviye componentlere tek tek props aktarımı yapmamak ve her seviye componentlere state ve property ulaştırabilmek ve her yerden değiştirebilmek için ortaya çıkmış bir ihtiyaçtır.

Context’in sağladığı merkez depo(store) ile ise istediğimiz şeyleri tüm uygulamamıza gönderebiliyor ve props drilling yöntemi kullanmadan rahatlıkla ulaşıp, değiştirebiliyoruz.

React Dökümantasyonu:

Context; mevcut kullanıcıyı doğrulama, tema veya dil seçimi gibi React bileşen ağacında global olarak düşünülebilecek verileri paylaşmak için tasarlanmıştır.

Pekala, Context nasıl kullanılır?

1.

Öncelikle createContext isimli metodu çağırıp bahsettiğimiz depoyu oluşturuyoruz. Ve bir Provider oluşturup içinde useReducer hook’unu tanımlıyoruz.

2. initialState tanımlamak

3. useReducer

Aksiyonlarımızı tanımladığımız ve object destructuring veya object methods yöntemleri ile state’imizi mutate ettiğimiz hook’u oluşturuyoruz.

4. App’i sarmalamak

5. Consumer

Artık state’imizi global hale getirdiğimize göre, componentlerimizde çağırabilir ve aksiyon alabiliriz.

Hepsi bu kadar.

Daha önce kullanmadıysanız, useReducer hook’u için React dökümantasyonunu okumanızı öneririm.