Redux ve GraphQL Kullanarak React Uygulamaları Geliştirme

Adı : Redux ve GraphQL Kullanarak React Uygulamaları Geliştirme

React, günümüzde en popüler frontend kütüphanesi olarak karşımıza çıkıyor. React uygulamalarının popülerliği ile birlikte, bu uygulamaların durum yönetimleri de oldukça önem kazanıyor. Redux ve GraphQL, React uygulamalarında durum yönetimi için kullanılan popüler teknolojiler arasında yer alıyor. Bu yazıda, Redux ve GraphQL kullanarak React uygulamaları geliştirmenin nasıl yapılacağına değineceğiz.
Redux
Redux, React uygulamalarında durum yönetimi için kullanılan bir kütüphanedir. Redux, uygulamadaki herhangi bir bileşenden erişilebilen standart bir depoda durumun yönetilmesine izin verir. Redux, uygulamanın ölçeklenebilirliğini artırmak için tasarlanmıştır. Redux, uygulama durumunu merkezi bir yerde yöneterek, uygulama genelinde tutarlı bir durum oluşmasını sağlar.
Redux kullanarak, genellikle aşağıdaki adımlar izlenir:
1. Aksiyonlar
Redux'ta, aksiyonlar, uygulamanın durumunu değiştirmek için kullanılan nesnelerdir. Bunlar, uygulamanın farklı bileşenleri tarafından tetiklenebilir.
2. Reducerlar
Reducerlar, bir aksiyonun uygulamanın durumunu nasıl değiştireceğini belirleyen fonksiyonlardır. Bu fonksiyonlar, önceki bir duruma ve bir aksiyona dayalı olarak yeni bir durum döndürürler.
3. Depo
Depo, uygulama durumunun saklandığı yerdir. Depo, bir oluşturucu fonksiyonda, bir başlangıç durumu ve bir aracı fonksiyonla oluşturulur. Aracı fonksiyon, aksiyonları reducerlara gönderir ve uygulama durumunu günceller.
4. Bağlayıcılar
Bağlayıcılar, depoya abone olan bileşenlerdir. Bu bileşenler, depodaki durumda bir değişiklik olduğunda yeniden render edilir.
GraphQL
GraphQL, modern web uygulamaları için bir sorgulama dilidir. GraphQL, uygulama sunucusu ile istemciler arasında veri alımı ve gönderimini kolaylaştırır. GraphQL, bir istemci isteğiyle gereksiz verileri almayı önleyerek veri alışverişini optimize eder.
GraphQL'in sunduğu avantajlar arasında aşağıdakiler bulunur:
1. Veri alımı ve gönderimi için tam kontrole sahip olma
2. Birden fazla istek yapılmak yerine tek bir istekle tüm verilerin alınabilmesi
3. Tekrar kullanılabilir sorgu parametreleri ile dinamik veri alımı
4. Geliştiricilerin hata ayıklamasını kolaylaştıran iyileştirilmiş hata denetimi
Redux ve GraphQL Kullanarak React Uygulamaları Geliştirme
Redux ve GraphQL, React uygulamaları geliştirmek için birlikte kullanılabilir. Redux, uygulamanın genelinde tutarlı bir durum oluşmasını sağlar. GraphQL ise uygulama sunucusu ile veri alımı ve gönderimini optimize eder.
Aşağıdaki örnekte, Redux, GraphQL ve React kullanarak basit bir todo uygulaması tasarlanacaktır.
1. Paketleri Yükleme ve Hazırlama
Bir React projesi oluşturmak için, öncelikle Node.js yüklü olmalıdır. Daha sonra, npm veya yarn kullanarak, React, Redux, React Router, Apollo ve diğer gerekli paketleri yükleyebilirsiniz.
2. Olası Geliştirmeleri Planlama
Geliştirme sürecini tasarlamak için, uygulamanın özellikleri ve yetenekleri belirlenmelidir. Bu özellikler, kullanıcıların yapabileceği eylemleri ve uygulamanın görüntüsünü içerebilir. Bu özellikler aşağıdaki gibi olabilir:
- Kullanıcılar, bir todo ekleyebilir, silinebilir veya tamamlanabilir.
- Kullanıcılar, tüm todoları görebilir veya tamamlandı veya tamamlanmadı olarak filtreleyebilirler.
- Kullanıcılar, todo girerken veya düzenlerken hata mesajlarını görebilirler.
- Kullanıcılar, todo düzenlerken bir önizleme görebilirler.
3. Yerel Depo Kullanarak Todo Durumunu Yönetme
Öncelikle, bir Redux mağazası oluşturalım. Bu depo, uygulama durumunu depolayacak ve değiştirecektir. createStore yöntemi ile bir Redux mağazası oluşturalım.
```javascript
import { createStore } from 'redux';
const store = createStore(reducer);
```
Depo, bir başlangıç durumu ve bir azaltıcı işlev tarafından yaratılır. Başlangıç durumu, ilk State değerini ve azaltıcı işlev, Redux yoluyla yapılan değişiklikleri ele alacaktır.
```javascript
const initState = {
todos: []
}
const reducer = (state, action) => {
switch (action.type) {
case \"ADD_TODO\":
return {...state, todos: [...state.todos, action.payload]};
case \"REMOVE_TODO\":
return {...state, todos: state.todos.filter(todo => todo !== action.payload)};
case \"COMPLETED_TODO\":
return {...state, todos: state.todos.map(todo => {
if (todo === action.payload) {
return {...todo, completed: !todo.completed}
} else return todo;
})};
default:
return state;
}
}
```
Mağazaya eklenen her bir todo, belirli bir şekilde adlandırılan bir eylem kullanılarak depolanır. ADD_TODO eylemi, gelen payload ile bir todo ekler. REMOVE_TODO, todo'nun depodan silinmesi için kullanılır. COMPLETED_TODO ise todo'nun tamamlanmışlığını belirler.
4. GraphQL Sunucusuna Bağlanma
Şimdi, GraphQL sunucusuna bağlanmak için Apollo'yu kullanarak bir GraphQL istemcisi oluşturalım:
```javascript
import ApolloClient from \"apollo-boost\";
const client = new ApolloClient({
uri: \"https://localhost:4000\"
});
```
ApolloClient, GraphQL sunucusuna bağlanmak için uri'yi kullanır.
5. Sunucudan Veri Alma
ApolloProvider, bağlı tüm komponentlere istemciyi sağlayacak ve verileri alacak. ApolloProvider, uygulamanın kök komponentinde olmalıdır.
```javascript
import { ApolloProvider } from \"@apollo/react-hooks\";
import React from \"react\";
import ReactDOM from \"react-dom\";
import App from \"./App\";
import client from \"./client\";
ReactDOM.render(


,
document.getElementById(\"root\")
);
```
GraphQL sunucusundan veri yükleme, useQuery isimli bir kancayı kullanarak yapılabilir.
```javascript
import { useQuery } from \"@apollo/react-hooks\";
import React from \"react\";
import { gql } from \"apollo-boost\";
const GET_TODOS = gql`
query {
todos {
id
title
}
}
`;
const Todos = () => {
const { loading, error, data } = useQuery(GET_TODOS);
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
return (

{data.todos.map(({ id, title }) => (

• {title}

))}

);
};
export default Todos;
```
Burada, GET_TODOS sorgusu ile tüm todolar sunucudan alınır. Sonuçlar data nesnesinde depolanır.
Sık Sorulan Sorular
1. Redux, React uygulamalarında mı, yoksa React için mi kullanılır?
Redux, React uygulamalarında durum yönetimi için kullanılır.
2. GraphQL, React uygulamalarında neden kullanılır?
GraphQL, React uygulamalarında veri alımı ve gönderimini optimize etmek için kullanılır.
3. Redux ve GraphQL'i nasıl birlikte kullanabilirim?
Redux ve GraphQL, React uygulamlarıının durum yönetimi ve veri alımı/gönderimi için kullanılırlar. Bu iki teknoloji, birlikte kullanılarak performans ve ölçeklenebilirlik artırılabilir.