React.Js useReducer() Kullanımı

React.Js useReducer() Kullanımı

useReducer()

useReducer React'ta bir hook'tur ve daha karmaşık durum mantığına sahip bileşenler için useState'in bir alternatifidir. Bu hook, bir durum ve bir gönderme (dispatch) fonksiyonu döndürür. Gönderme fonksiyonu, durumu güncellemek için kullanılır. useReducer genellikle bir reducer fonksiyonu ve bir başlangıç durumu alır.

Kullanımı

useReducer'in temel sözdizimi şu şekildedir:

const [state, dispatch] = useReducer(reducer, initialState);

 

• state: Mevcut durum değeri.
• dispatch: Durumu güncellemek için kullanılan fonksiyon.
• reducer: Durumu ve bir eylem alıp, yeni bir durum döndüren fonksiyon.
• initialState: İlk durum değeri.

Reducer Fonksiyonu

Reducer fonksiyonu, mevcut durumu ve bir eylem objesini alır, ve yeni bir durum döndürür.

function reducer(state, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
throw new Error();
}
}

Örnek

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
</>
);
}

Dikkat Edilmesi Gerekenler

• useReducer yalnızca bileşenlerin en üst seviyesinde kullanılmalıdır. Döngüler, koşullar veya iç içe fonksiyonlar içinde kullanılmamalıdır.
• Reducer fonksiyonları "saf" olmalıdır; yani, aynı girdilerle çağrıldığında her zaman aynı çıktıyı üretmelidir.
• dispatch fonksiyonu bileşeni yeniden render eder, bu yüzden performansı etkileyecek şekilde çok fazla yeniden render olmamasına dikkat etmek önemlidir.
• useReducer hook'u, karmaşık durum mantığı, geçişli durumlar veya durum güncellemeleri sırasında önceki duruma bağımlılık gibi durumlar için oldukça yararlıdır. Ayrıca, useReducer genellikle büyük uygulamalarda veya Redux gibi daha karmaşık durum yönetimi kütüphanelerinin bir alternatifi olarak kullanılır.