Bugün, React uygulamalarında sıklıkla kullanılan ve genellikle karmaşık durum yönetimi senaryolarında tercih edilen useReducer kancasını ele alacağız. Bu yazıda, React useReducer nedir, nasıl kullanılır ve neden tercih edilir sorularını adım adım açıklayacağım.
React useReducer
Öncelikle, useReducer kulanımında karşınıza çıkacak terimlere bakalım:
- useReducer: State yönetimi için kullanılan bir hook’tur.
- Dispatch: useReducer ile eylemleri tetiklemek için kullanılan fonksiyon.
- Action: State’i güncellemek için kullanılan nesneler.
Bu hook, genellikle useState’e kıyasla daha fazla kontrol ve esneklik sunar. Temel olarak, useReducer state yönetimini işlevsel bir şekilde gerçekleştirmenize yardımcı olur.
Büyük ve karmaşık bileşenlerde, birden fazla durum değişkeni olabilir ve bu durumlar arasında belirli bir mantıkla geçişler yapmanız gerekebilir. Bu noktada, useReducer kullanmak kodunuzu daha organize ve sürdürülebilir hale getirebilir.
React useReducer Kullanımı
Genel kullanım şu şekildedir:
Adım 1: Reducer Fonksiyonunu Oluşturma
İlk olarak, bir reducer fonksiyonu oluşturmalısınız. Bu fonksiyon, mevcut state’i ve bir aksiyonu alır, bu aksiyona göre yeni bir state döndürür. Örnek bir reducer fonksiyonu:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const reducer = (state, action) => { switch (action.type) { case 'INCREMENT': return { count: state.count + 1, text: "Sayaç bir arttı" }; case 'DECREMENT': return { count: state.count - 1, text: "Sayaç bir azaldı" }; default: return state; }; }; |
Adım 2: Initial State Tanımlama
|
1 2 3 |
const initialState = { count: 0, text: "Sayaç sıfır"}; |
Adım 3: Dispatch ve Action Kavramları
dispatch fonksiyonu, reducer’a bir aksiyon göndererek state’i güncelleme görevini üstlenir. Aksiyonlar, genellikle bir nesne olarak tanımlanır ve type adında bir özelliğe sahiptir.
|
1 2 3 4 |
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button> |
Adım 4: State’i Kullanma
|
1 2 3 4 |
<p>Sayaç: {state.count}</p> <p>Durum: {state.text}</p> |
Adım adım yukarda gördüğümüz kodları şimdi bir araya getirerek bir counter uygulaması yapalım. Aşağıdaki kodları inceleyelim ve çıktıda nasıl çalıştığına bakalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import React, { useReducer } from 'react'; // Başlangıç durumu const initialState = { count: 0, text: "Sayaç sıfır"}; // Durum ve eylem işleyicisi fonksiyonu const reducer = (state, action) => { switch (action.type) { case 'INCREMENT': return { count: state.count + 1, text: "Sayaç bir arttı" }; case 'DECREMENT': return { count: state.count - 1, text: "Sayaç bir azaldı" }; default: return state; }; }; function CounterWithReducer() { const [state, dispatch] = useReducer(reducer, initialState); return ( <div> <p>Sayaç: {state.count}</p> <p>Durum: {state.text}</p> <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button> </div> ); } export default CounterWithReducer; |
Çıktı:
Yukarıdaki örnekte, useReducer’ı kullanarak basit bir sayaç bileşeni oluşturduk. Başlangıç durumu (initialState) ve bir durum işleyicisi (reducer) fonksiyonu belirledik. Bu fonksiyon, mevcut state’e ve eyleme bağlı olarak yeni state döndürür.
dispatch fonksiyonu, bileşen içinde state’i güncellemek için kullanılır.
Bu yazımızda, useReducer Nedir ve useReducer Neden Kullanılır sorularına cevap verdim. Nasıl kullanacağınızı, neden tercih edildiğini ve kullanmanın avantajlarını öğrendik. Umarım bu bilgiler, React uygulamalarınızı daha etkili bir şekilde geliştirmenize yardımcı olur.
Şu yazılar da ilginizi çekebilir.
React useRef Nedir? React useRef kullanımı
Happy coding!
