28 Temmuz 2018 Cumartesi

React Context API Kullanımı

Herkese merhaba,
bu yazımda sizlere React Context  API kullanımından bahsedeceğim.  React ile geliştirme yapıyorsanız komponentler arasında parametre taşıma ve değişiklikleri üst/alt komponentlere taşımanın ne kadar kompleks bir durum olduğunu farketmişsinizdir.  Bu durumu aşabilmek için herkes gibi ben de Redux kullanıyordum ve session da tutulması gereken obje/değişkenleri Redux'a atarak ilerliyordum. Global object olarak redux aracılığıyla alt yada üst komponentlere session değerlerini  taşıyordum.

Ancak Redux'ın implementasyonu, ilgili komponentlerle ilişkilendirilmesi, Action ve Action Type ların oluşturulması,..vs açıkçası biraz yorucu olmaktaydı. Çünkü büyük ve kompleks projelerde tree yapısındaki komponentlere hükmetmek pek kolay olmuyordu. Daha ergonomik bir çözüm arayan react geliştiricileri  son dönemde Facebook'un kendisinin bu işe el atarak Context API'yı yayınlamasıyla bir hayli sevindi.

React Context API; sizin komponentler arasında taşımak istediğiniz objeleri bir Provider komponenti oluşturup  bu Provider komponentinin state'inde  tutar.  Alt komponentlerden de yine ContextAPI içinde bulunan  Consumer aracılığıyla erişim imkanı sunar. Sunulan bu yapı sayesinde herhangi bir 3rd entegrasyon yapmadan  komponentleri ortak değişkenlerle ilişkilendirebilirsiniz. Bu ilişkilendirmeyi yaparken Redux ta olduğu gibi Action, ActionType, Container, Reducer tanımlaması yapmanıza da gerek kalmayacaktır.

Sizleri çok fazla yazıya boğmadan şunu belirtmek isterim ki;  buradaki github linkinde Context API kullanımını inceleyip örneklendirdiğim bir proje bulunmaktadır. Bu projeyi inceleyerek Context API ın kullanımını görebilirsiniz.

NOT:  Context API react'ın 16.3 sürümünden sonra eklenmiştir. Belirtilenden daha düşük sürümlerde Context API çalışmayacaktır.

Hiç yorum yok:

Yorum Gönder