React’te useContext ve useReducer ile Küresel Durum Yönetimi: Etkin Bir Kılavuz
React uygulamalarında küresel durumu yönetmek zorlu bir iş olabilir. Özellikle karmaşık uygulamalarda, bileşenler arasında veri alışverişi yapmak ve durumu güncellemek karmaşık hale gelebilir. Bu nedenle, React’te **useContext** ve **useReducer** hook’ları, küresel durumu etkili bir şekilde yönetmek için ideal çözümler sunar. Bu makalede, bu hook’ları nasıl kullanacağınızı ve uygulama geliştirme sürecinde size nasıl yardımcı olduklarını adım adım ele alacağız.
useContext: Global Duruma Kolay Erişimi Sağlamak
useContext, bir React bileşeninin **Context API** aracılığıyla küresel duruma erişmesini sağlar. Context API, uygulamanızın tamamı boyunca paylaşılabilen ve tüm bileşenlerden erişilebilen bir durum deposu oluşturmanıza olanak tanır. useContext hook’unu kullanmak için öncelikle bir Context oluşturmanız gerekir:
“`jsx
import React, { createContext, useContext } from ‘react’;
const ThemeContext = createContext(‘light’);
function ThemeProvider({ children }) {
const [theme, setTheme] = React.useState(‘light’);
return (
{children}
);
}
function MyComponent() {
const { theme, setTheme } = useContext(ThemeContext);
return (
Tema: {theme}
);
}
export default function App() {
return (
);
}
“`
Bu örnekte, **ThemeContext** adında bir Context oluşturduk ve **ThemeProvider** bileşeni aracılığıyla durumu sağlar. MyComponent bileşeni ise **useContext** hook’unu kullanarak **ThemeContext**’e erişir ve temayı güncellemek için **setTheme** fonksiyonunu kullanır.
useReducer: Karmaşık Durum Yönetimini Basitleştirmek
useReducer, karmaşık durum güncellemelerini yönetmek için bir yapı sağlar. useReducer, bir reducer fonksiyonu ve başlangıç durumu alarak, durum güncellemeleri için bir mekanizma oluşturur. Reducer fonksiyonu, mevcut durumu ve eylemi alır ve yeni durumu döndürür.
“`jsx
import React, { useReducer } from ‘react’;
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
default:
return state;
}
};
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
Sayı: {state.count}
);
}
export default Counter;
“`
Bu örnekte, **initialState** ile bir başlangıç durumu ve **reducer** fonksiyonu ile durum güncellemelerini yöneten bir reducer oluşturduk. **useReducer** hook’u, **state** ve **dispatch** fonksiyonunu döndürür. **dispatch** fonksiyonu, reducer fonksiyonunu çağırarak durum güncellemeleri için kullanılır.
useContext ve useReducer’ı Birlikte Kullanmak
useContext ve useReducer, birlikte kullanıldığında küresel durumu etkili bir şekilde yönetmek için güçlü bir kombinasyon oluştururlar. Örneğin, bir alışveriş sepetinin durumunu yönetmek için bu hook’ları birleştirebiliriz:
“`jsx
import React, { createContext, useContext, useReducer } from ‘react’;
const CartContext = createContext();
const initialState = { items: [] };
const reducer = (state, action) => {
switch (action.type) {
case ‘ADD_ITEM’:
return { items: […state.items, action.payload] };
case ‘REMOVE_ITEM’:
return {
items: state.items.filter((item) => item.id !== action.payload.id),
};
default:
return state;
}
};
function CartProvider({ children }) {
const [state, dispatch] = useReducer(reducer, initialState);
return (
{children}
);
}
function Cart() {
const { state, dispatch } = useContext(CartContext);
return (
{/* Alışveriş sepeti öğelerini silmek için düğmeler */}
);
}
function App() {
return (
);
}
“`
Bu örnekte, **CartContext** adında bir Context oluşturduk ve **CartProvider** bileşeni ile durumu sağladık. **useReducer** hook’unu kullanarak alışveriş sepetinin durumunu yönettik ve **useContext** hook’u ile **Cart** bileşeni bu duruma erişebiliyor.
Sonuç
useContext ve useReducer hook’ları, React uygulamalarında küresel durumu yönetmek için kullanışlı ve etkili araçlardır. useContext, global duruma erişimi basitleştirirken, useReducer karmaşık durum güncellemelerini yapılandırmanıza yardımcı olur. Bu hook’ları birleştirerek, React uygulamalarınızda küresel durumu yönetebilir ve karmaşık veri alışverişi sorunlarını çözebilirsiniz.
Daha Fazla Bilgi
Daha fazla bilgi edinmek için şu kaynakları inceleyebilirsiniz:
#Etiketler
React, useContext, useReducer, Küresel Durum, Context API, Durum Yönetimi, React Hook’ları, Uygulama Geliştirme