React useReducer Hook'u: Sözdizimi, Örnekler, useState Farkı

Q: dispatch state'i hemen günceller mi?

Hayır. Bir useState setter'ı gibi dispatch bir render planlar. Mevcut olay işleyicisinin içinde state hâlâ eski değeri tutar; yeni state sonraki render'da görünür.

Q: useReducer'ın üçüncü argümanı nedir?

İsteğe bağlı bir init fonksiyonu. Onu aktardığında React başlangıç state'ini init(initialArg) olarak ve yalnızca ilk render'da hesaplar. Başlangıç state'ini oluşturmak pahalı olduğunda ya da bir prop'a bağlı olduğunda kullanışlıdır.

useReducer, useState gibi state tutan ama onu değiştirmenin her yolunu tek bir fonksiyona, reducer'a taşıyan bir React hook'udur. Bileşenin { type: 'increment' } gibi bir action nesnesiyle dispatch çağırır, React da mevcut state'i ve o action'ı reducer'a aktarır; reducer sonraki state'i döndürür.

import { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        case 'reset':
            return { count: 0 };
        default:
            throw new Error('Unknown action: ' + action.type);
    }
}

export default function App() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p style={{ fontSize: 24 }}>{state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>+1</button>{' '}
            <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>{' '}
            <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
        </div>
    );
}

Düğmeler sayının nasıl değiştiğini söylemez, yalnızca ne olduğunu söyler. Tüm aritmetik reducer'da yaşar. { count: state.count * 2 } döndüren bir case 'double' ve onu dispatch eden bir düğme ekle; yeni bir güncelleme türünün nasıl yerleştiğini gör.

Sözdizimi

const [state, dispatch] = useReducer(reducer, initialArg, init); // init is optional

function reducer(state, action) {
    // return the next state
}

reducer, (state, action) => nextState biçiminde bir fonksiyondur. Onu bileşenin dışında tanımla; bileşenin kapsamından hiçbir şeye ihtiyacı yoktur.
initialArg başlangıç state'idir, yalnızca ilk render'da kullanılır.
init isteğe bağlıdır. Onu aktarırsan başlangıç state'i bunun yerine init(initialArg) olur.
state bu render için mevcut state'tir.
dispatch(action) reducer'a bir action gönderir ve sonuçla bir render planlar. Sabittir: her render'da aynı fonksiyondur, bu yüzden aşağı aktarmak ya da bağımlılık olarak listelemek güvenlidir.

Bir action herhangi bir değer olabilir, ama kurala göre ne olduğunu tarif eden bir type metni ve reducer'ın ihtiyaç duyduğu veriyi içeren bir nesnedir: { type: 'added', text: 'Buy milk' }.

Bir reducer yazmak

Çoğu reducer action.type üzerinde bir switch'tir ve her olay türü için bir case içerir. Her case yepyeni bir state döndürür; eskisini asla değiştirmez. default case hata fırlatır, böylece dispatch({ type: 'incremnet' }) gibi bir yazım hatası hiçbir şey yapmamak yerine yüksek sesle başarısız olur.

Action'ları aklındaki state değişikliğine göre (setTodos) değil, kullanıcının yaptığı şeye göre (added, toggled, deleted) adlandır. Böylece bileşen bir olay listesi gibi okunur ve her olayın ne anlama geldiğine karar veren tek yer reducer olur.

Reducer'lar saf olmalıdır

Bir reducer saf bir fonksiyondur: aynı state ve action verildiğinde aynı sonucu döndürür ve başka hiçbir şey yapmaz. Bu, içinde mutation, istek, zamanlayıcı, Math.random() ya da Date.now() olmaması demektir. React buna güvenir. Geliştirmede StrictMode altında React, saf olmayan bir reducer'ı fark etmene yardım etmek için reducer'ını her action için iki kez çağırır ve bir sonucu tutar. Buradaki önizleme bir production derlemesi gibi çalışır, bu yüzden bu sayfadaki örnekler onu bir kez çağırır.

İnsanların en çok çiğnediği kural mutation kuralıdır. state.todos'a push edip state döndürmek aynı nesneyi döndürür, bu yüzden React hiçbir değişiklik görmez ve render'ı atlar; bu, dizileri ve nesneleri güncellemek sayfasında anlatılan tuzağın aynısıdır. Yeni dizileri ve nesneleri spread, map ve filter ile oluştur.

// Wrong: mutates and returns the same object
case 'added':
    state.todos.push(action.todo);
    return state;

// Right: returns a new object with a new array
case 'added':
    return { ...state, todos: [...state.todos, action.todo] };

Bir olaya ait yan etkiler, örneğin bir sunucuya kaydetmek, dispatch'in yanında olay işleyicisine gider. State'e ait yan etkiler, örneğin onu localStorage'a senkronize etmek, bir efekte gider.

useReducer ile bir todo listesi

İşte gerçek iş yapan reducer: todo eklemek, işaretlemek ve silmek. Reducer'ın en üstündeki console.log her action'ı yazdırır; bu, hata ayıklarken state'in nasıl değiştiğini izlemenin kullanışlı bir yoludur. Hiçbir şeyi değiştirmediği için bir reducer'da yaygın olarak hoş görülen tek yan etkidir; yayına almadan önce çıkar.

import { useReducer, useState } from 'react';

let nextId = 3;

function todosReducer(todos, action) {
    console.log('action', action.type, action);
    switch (action.type) {
        case 'added':
            return [...todos, { id: action.id, text: action.text, done: false }];
        case 'toggled':
            return todos.map((t) => (t.id === action.id ? { ...t, done: !t.done } : t));
        case 'deleted':
            return todos.filter((t) => t.id !== action.id);
        default:
            throw new Error('Unknown action: ' + action.type);
    }
}

export default function App() {
    const [todos, dispatch] = useReducer(todosReducer, [
        { id: 1, text: 'Read the docs', done: true },
        { id: 2, text: 'Write a reducer', done: false },
    ]);
    const [text, setText] = useState('Ship it');

    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} />
            <button onClick={() => { dispatch({ type: 'added', id: nextId++, text }); setText(''); }}>Add</button>
            <ul>
                {todos.map((t) => (
                    <li key={t.id}>
                        <label>
                            <input
                                type="checkbox"
                                checked={t.done}
                                onChange={() => dispatch({ type: 'toggled', id: t.id })}
                            />
                            {t.text}
                        </label>{' '}
                        <button onClick={() => dispatch({ type: 'deleted', id: t.id })}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

Bir todo ekle, bir kutuyu işaretle ve birini sil, sonra konsolu oku: her değişiklik action'ı ve verisini adlandıran tek bir satırdır. Input'un metni useState'te kalır, çünkü alana özeldir ve başka hiçbir olay ona dokunmaz. İki hook'u tek bir bileşende karıştırmak normaldir.

Yeni todo'nun id'si tıklama işleyicisinde oluşturulur ve action içinde taşınır, bu yüzden reducer onu yalnızca kopyalar. Reducer'ın içine id: nextId++ yazmak onu saf olmaktan çıkarırdı: geliştirmede StrictMode altında ikinci çağrı bir id'yi atlardı.

dispatch state'i hemen değiştirmez

dispatch bir useState setter'ı gibi çalışır: bir render planlar ve mevcut işleyicindeki state değişkeni eski değeri korur. Yeni state'i hemen kullanmak için reducer'ı çağırarak onu kendin hesapla.

import { useReducer } from 'react';

function reducer(state, action) {
    if (action.type === 'add') return { total: state.total + action.amount };
    throw new Error('Unknown action: ' + action.type);
}

export default function App() {
    const [state, dispatch] = useReducer(reducer, { total: 0 });

    function addTen() {
        const action = { type: 'add', amount: 10 };
        dispatch(action);
        console.log('state.total after dispatch:', state.total);
        console.log('what the next render will see:', reducer(state, action).total);
    }

    return <button onClick={addTen}>Add 10 (total {state.total})</button>;
}

Birkaç kez tıkla. İlk kayıt satırı her zaman bir adım geridedir, ikincisi ise render'dan sonra düğmedeki sayıyla eşleşir. Reducer düz bir fonksiyon olduğu için onu kendin çağırmak güvenlidir; bu da onu saf tutmanın bir başka faydasıdır.

useState ve useReducer

İki hook da state saklar ve biriyle yazdığın her şeyi diğeriyle de yazabilirsin. Fark, güncelleme mantığının nerede yaşadığıdır.

	useState	useReducer
Güncelleme mantığı	Her olay işleyicisinde	Tek bir reducer fonksiyonunda
Uygun olduğu yer	Birkaç bağımsız değer	Birçok olayın birlikte değiştirdiği birkaç alan
Kod miktarı	Basit state için daha az	Başta daha fazla, olaylar arttıkça daha az
Test	Bileşen üzerinden test et	Reducer'ı düz bir fonksiyon olarak test et
Hata ayıklama	Onu hangi işleyicinin ayarladığını bul	Her action'ı tek bir yerde kaydet

Aynı state'in birçok işleyicide güncellendiğini fark ettiğinde, bir olayın tutarlı kalması gereken birkaç state parçasını değiştirmesi gerektiğinde ya da bir işleyici çoğunlukla sonraki state hakkındaki mantıktan oluştuğunda useReducer'a başvur. Bir toggle ya da bir metin alanı için useState daha kısa ve daha açıktır. Sonradan geçiş yapmak zor değildir: setter'ları dispatch'lerle değiştir ve mantığı case'lere taşı.

Lazy başlatma

Başlangıç state'ini useReducer(reducer, createInitialState('Ada')) gibi bir fonksiyon çağrısı olarak yazarsan, React sonucunu yalnızca ilk seferde kullansa bile bu çağrı her render'da çalışır. Başlangıç state'ini oluşturmak pahalıysa ya da bir prop'tan türetilmesi gerekiyorsa üçüncü bir argüman aktar: bir init fonksiyonu. React init(initialArg)'ı bir kez, ilk render'da çağırır.

import { useReducer, useState } from 'react';

function createInitialState(username) {
    console.log('createInitialState runs for', username);
    const todos = [];
    for (let i = 1; i <= 3; i++) {
        todos.push({ id: i, text: `${username}'s task ${i}` });
    }
    return { todos };
}

function reducer(state, action) {
    if (action.type === 'cleared') return { todos: [] };
    throw new Error('Unknown action: ' + action.type);
}

export default function App() {
    const [state, dispatch] = useReducer(reducer, 'Ada', createInitialState);
    const [note, setNote] = useState('');

    return (
        <div>
            <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Type to re-render" />
            <ul>
                {state.todos.map((t) => <li key={t.id}>{t.text}</li>)}
            </ul>
            <button onClick={() => dispatch({ type: 'cleared' })}>Clear</button>
        </div>
    );
}

Input'a yaz: bileşen her tuş vuruşunda render olur, ama createInitialState yalnızca bir kez kayıt yazar. Şimdi çağrıyı useReducer(reducer, createInitialState('Ada')) olarak değiştir ve yeniden yaz. Fonksiyon her render'da çalışır ve React ilkinden sonra her seferinde sonucu atar.

Fonksiyonun kendisini aktar, çağırmanın sonucunu değil. useReducer(reducer, 'Ada', createInitialState) lazy'dir; useReducer(reducer, createInitialState('Ada')) değildir.

Context ile useReducer

Derin bir ağacın state'e ihtiyacı olduğunda bir reducer context ile iyi eşleşir. State'i ve dispatch'i en üstte context'e koy; aşağıdaki herhangi bir bileşen her katmandan props geçirmeden state'i okuyabilir ya da action gönderebilir. dispatch hiç değişmediği için yalnızca action gönderen bileşenler ayrı bir dispatch context'ini okuyabilir ve state değiştiğinde yeniden render'ı atlayabilir.

import { createContext, useContext, useReducer } from 'react';

const TodosContext = createContext(null);
const TodosDispatchContext = createContext(null);

export function TodosProvider({ children }) {
    const [todos, dispatch] = useReducer(todosReducer, []);
    return (
        <TodosContext value={todos}>
            <TodosDispatchContext value={dispatch}>{children}</TodosDispatchContext>
        </TodosContext>
    );
}

function AddTodo() {
    const dispatch = useContext(TodosDispatchContext);
    return <button onClick={() => dispatch({ type: 'added', text: 'New' })}>Add</button>;
}

React 19'da bir context nesnesi kendi provider'ı olarak çalışır (<TodosContext value={...}>); <TodosContext.Provider> da hâlâ çalışır. useContext sayfası context'in bileşenlere nasıl ulaştığını ve onları ne zaman yeniden render ettiğini anlatıyor.

Sıkça Sorulan Sorular

React'te useReducer nedir?

Güncellemeleri action olarak tarif edilen state için bir hook'tur. const [state, dispatch] = useReducer(reducer, initialState) çağırırsın, sonra olay işleyicilerinden dispatch({ type: 'added' }) çağırırsın. React mevcut state'i ve action'ı reducer'ına aktarır; onun döndürdüğü şey sonraki state olur.

useState yerine ne zaman useReducer kullanmalıyım?

Birkaç olay aynı state'i birbiriyle ilişkili şekillerde güncellediğinde, sonraki state aynı anda birkaç alana bağlı olduğunda ya da güncelleme mantığı onu bileşenin dışında, test edilebilir tek bir fonksiyonda istemeni gerektirecek kadar uzun olduğunda. Bir iki bağımsız değer için useState daha basittir.

Bir reducer neden saf olmalı?

React aynı action için reducer'ını birden fazla kez çağırabilir (StrictMode geliştirmede bunu bilerek yapar) ve her seferinde aynı sonucu bekler. Bu yüzden bir reducer state'i değiştirmemeli, veri çekmemeli, zamanlayıcı kurmamalı ya da rastgele değerler okumamalıdır. Bunları olay işleyicilerinde ya da efektlerde yap.

dispatch state'i hemen günceller mi?

Hayır. Bir useState setter'ı gibi dispatch bir render planlar. Mevcut olay işleyicisinin içinde state hâlâ eski değeri tutar; yeni state sonraki render'da görünür.

useReducer'ın üçüncü argümanı nedir?

İsteğe bağlı bir init fonksiyonu. Onu aktardığında React başlangıç state'ini init(initialArg) olarak ve yalnızca ilk render'da hesaplar. Başlangıç state'ini oluşturmak pahalı olduğunda ya da bir prop'a bağlı olduğunda kullanışlıdır.

İlgili kavramlar