React.js useReducer Hook Kullanımı

React.js’in useReducer kancası, bileşen içindeki durumu yönetmek için kullanılır ve genellikle karmaşık durum yönetimi gerektiren durumlarda useState‘den daha uygun bir seçenektir. Birkaç adımda useReducer kancasını kullanarak bir örnek oluşturalım:

• İlk olarak, bir reducer fonksiyonu oluşturmalıyız. Bu fonksiyon, mevcut durum ve bir eylem almalı ve yeni durumu döndürmelidir. Eylemler, durumu güncellemek için belirli komutları temsil eder. Bu örnekte, artırmak ve azaltmak için iki ayrı eylem olacak.

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

• Ardından, useReducer kancasını kullanarak durumu ve dispatch fonksiyonunu bileşen içinde tanımlayabiliriz.

import React, { useReducer } from 'react';

const Counter = () => {
  const initialState = { count: 0 };
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Bu örnekte, useReducer kancası bir reducer fonksiyonu ve başlangıç durumuyla birlikte kullanılır. Ardından, dispatch fonksiyonu, durumu güncellemek için belirli bir eylemi tetiklemek için kullanılır. Eylemler bir nesne olarak belirtilir ve type alanı, hangi eylemin gerçekleştirileceğini belirtir. Bu nesne, dispatch fonksiyonuna geçirilir ve reducer fonksiyonu tarafından işlenir. Sonuç olarak, durum güncellenir ve bileşen yeniden render edilir.

Share on Facebook

Tweet