React Context Kullanımı

React Context Kullanımı

Herkese merhabalar,bildiğim kadarıyla sizlere react contexti kullanmayı anlatacağım.

Context Nedir ?

“Context” ihtiyaç duyulan verilerin, iç içe props geçmek yerine uygulama içerisinde global olarak kullanılmasını sağlar. Kısacası verileri props olarak taşımak yerine componentler arasında taşımamızı sağlayan bir yapıdır.

Proje Oluşturma

npx create-react-app router-app

ardından terminal ekranında npm start diyerek projeyi ayağa kaldırıyoruz.

Context Oluşturma

Proje içerisinde src/Store.js dosyası oluşturalım ve aşağıdaki işlemleri gerçekleştirelim.

import React,{useReducer,useContext} from 'react'

//1
export const CounterDataContext = React.createContext()
//2
const reducer = (state, action) => {
if ( action.type === 'increment' ){
return Object.assign({}, state, { counter: action.payload });
}else if ( action.type === 'decrement' ){
return Object.assign({}, state, { counter: action.payload});
}
return state;
}
//3
const Store = ({children}) => {
//4
const initialState = {counter: 0}
//5
const [state,dispatch]=useReducer(reducer,initialState)
//6
const increment=(payload)=>{dispatch({type: "increment", payload })}
const decrement=(payload)=>{dispatch({type: "decrement", payload })}
//7
return(
<CounterDataContext.Provider value={[state,{increment,decrement}]}>
{children}
</CounterDataContext.Provider>
)
}
//8
export const useCounterDataState = () => {
return useContext(CounterDataContext);
}
export default Store

kodu açıklayacak olursak;

1-)Counter verisi için bir context oluşturuluyor.

2-)İlgili verileri reducer yardımı ile state de saklıyorum gelen action tipine göre ilgili işlem gerçekleşip state güncellenecektir.

3-)Store oluşturulup gelen propsların içinden children kullanılacağının belirtilmesi.

4-)Statede tutulacak olan değerleri belirlenmesi

5-)Reducerin kullanılması, ilgili statein reducure verilmesi

6-)Counter değerini artıracak ve azaltacak fonksiyonların yazılması

7-)İlgili contexden verilerin dışarıya aktarılması

8-)Component içersinde özel bir hook olarak ilgili state ve fonksiyonlara erişilmesi.

Context Kullanma

Proje içerisinde src/index.js dosyasına oluşturduğumuz contexti import edelim ve kullanalım.

import CounterProvider from './Store'
ReactDOM.render(
<React.StrictMode>
<CounterProvider>
<App />
</CounterProvider>
</React.StrictMode>,
document.getElementById('root')
);

index.js içerisinde kapsanan bütün componentlerde ilgili counter state ve fonksiyonlara ulaşabilir hale geldik.

Şimdide src/App.js dosyasında ilgili contexi kullanalım.

import React from 'react';
import {useCounterDataState} from "./Store"
function App() {
const [state,{increment,decrement}]=useCounterDataState()
const artir=()=>{
increment(state.counter+1)
}
const azalt=()=>{
decrement(state.counter-1)
}
return (
<>
<div className="App">
<h1>Sayaç : {state.counter}</h1>
<button onClick={artir} >Arttır</button>
<button onClick={azalt}>Azalt</button>
</div>
</>);
}
export default App;

başarılı bir şekilde butonlara basıldığı zaman statedeki veri değişiyor ve o stateki kullanan diğer componentlerdede aynı şekilde değer değişiyor.

Herkese İyi Çalışmalar Dilerim :)