State Management with React Hooks (using Typescript)

Arkadaşlar merhaba. React konusuna aşina olanlar iyi bilir ki React — da state-in yönetilmesi en önemli konulardan biridir. Genelde bunun birden fazla yolları vardır: Redux, Redux Toolkit, Recoil etc. Konuyu fazla uzatmadan başlayalım isterseniz.

Bugun size bunu Third-Party lib kullanmadan bunu yapmayı anlatacağım. Bunun için useReducer ve useContext hook -larini kullanıcaz. Arkadaşlar eger bu hook -lar hakkında bilginiz yoksa öncelikle internetde kısa bir araştırma yapın sonra burdan devam ede bilirsiniz amma kısa açıklamak gerekirse useReducer initialstate bilgisi alıp onu update etmemize yarayan bir hook useContext sayesinde ise data — larımızı Prop Drilling yapmadan diger komponentlere ilete biliriz. Şimdi ise size bu 2-sini kullanarak nasıl State — lerimizi yöneteceyimizi anlatıcam.

Öncelikle initialState-mizi ve type-larını yazalım:

initialState ve type -larımızı oluşturdukdan sonra ana komponentimizde ilk olarak useReducer hookumuzu yazmaya başlaya biliriz

Hookumuzu oluşturdukdan sonra reducerimizi yazalım:

Reducer-imizi de yazdıkdan sonra action -larımız için type-larımızı yazalım:

Yukarıda oluşturduğumuz setTodo bizim sadece 1 action -mız. Burada istediyimiz kadar oluşturup appDispatch — a ilave ede biliriz. Şimdi sıra geldi createContext methodu ile Context-mizi oluşturmaya:

Arkadaşlar burda önemli konu Context-mizin initial deyerine initialState-mizin yanında dispatch fonksiyonumuzu da göndermemiz. Bununla consumer komponentlerimizde dispatch kullana biliriz artık. Şimdi AppContext.Provider -mizi kullanalım:

Tahmin edersiniz ki value içerisindeki dispatch olarak useReducer hook -daki dispatch gonderiyoruz. Artık TodoList komponentimizde deyerimizi alıp kullana biliriz:

Tabii yukardakı gibi yazarsanız bi şey gözükmez array -miz halen boş olduğu için. Hadi dispatch fonksiyonumuzu kullanalım:

Aynısını yaptıysanız boyle bir sonuç almanız gerekir

Arkadaşlar konumuz baya bir uzun amma size elimden geldiyi kadar kısa ve açıklayıcı şekilde anlatmaya calıştım umarım yardımcı ola bilmişimdir. Okuduğunuz için teşekkürler.