How to combine multiple reducers in useReducer Hook with Typescript
Arkadaşlar merhaba bugün useReducer hook-da nasıl birden fazla reducer function kullana bileceyimize bakıcaz. İnternetde bu işi kolaylaştıracak npm paketleri de mevcuttur fakat biz 3th-party paket indirmeden yapıcaz.
İlk olarak bunun için type-larımızı yazarak başlayalım:
Burada arkadaşlar öncelikle initialState object-miz için bir type oluşturuyoruz daha sonra 2 farklı Product ve Category isimli reducer-lerimiz olduğunu varsayarsak onlar içinde ayri type yazmamız gerek ve son olarak her 2 reducer için action-larımızı yazıyoruz.
Ardından reducer function-larımızı yazıyoruz ve parametre olarak göndereceyimiz state ve action data-larının type-larını yazıyoruz.
initialState objemizi oluşturmaya geldi sira ve createContext methodu ile Context-mizi oluşturuyoruz.
Önemli nokta tam olarakda bu kısım arkadaşlar defaultReducer adında bir function yazıyoruz parametre olarak initialState-mızın içinden destructing yapıyoruz her reducer-miz için kullanıcağımız state-i ve genel action-u gönderip geriye bir obje döndürüyoruz. Ve defaultReducer function-u useReducer hook-a göndere biliriz. Son olarak her render-de yeniden update olmaması için memorize ediyoruz.
Eğer useReducer ve useContext hook-larının state yönetimi için nasıl kurulduğuna hakim değilseniz bir önceki makaleme göz ata bilirsiniz:
Umarım yardımım dokunmuştur Hoşçakalın.
