React uygulamalarında karşılaşılan state yönetim karmaşıklıklarını ortadan kaldırmak için kullanılan Redux, bir kütüphanedir Redux, uygulamanın state değişikliklerini tek bir yerde yöneterek, kodun daha okunaklı ve sürdürülebilir kalmasını sağlar Redux, Actions, Reducers ve Store gibi temel kavramları içerir React ile birlikte kullanıldığında, bileşenler Redux store'undaki state verilerine kolayca erişebilirler ve state yönetimi daha organize hale gelir Actions, uygulamanın state'ini değiştirmek için kullanılan JavaScript nesneleri olarak tanımlanırken, Reducer'lar, state'in nasıl değiştirileceğini belirleyen fonksiyonlardır Redux kullanmak, uygulama boyutunu azaltarak performansı arttırmaya ve uygulama kodlarının daha kolay organize edilmesine yardımcı olur

React, giderek daha önemli hale gelen bir web uygulama geliştirme framework'üdür. Ancak, React uygulamalarının state yönetimi, uygulamanın büyümesiyle birlikte karmaşık hale gelebilir ve daha zor bir hale dönüşebilir. İşte burada Redux devreye girer. Redux, bu kompleksliği ortadan kaldırmak için kullanılan bir araçtır. Bu makalede, React üzerinde state yönetimi için Redux kullanımı ile ilgili en iyi yöntemleri ele alacağız.

Redux, React uygulamalarında state yönetimini kolaylaştıran bir kütüphanedir. Redux ile state, uygulamanın herhangi bir yerinde güncellenebilir ve bu değişiklikler tüm uygulama boyunca güncellenir. Redux, uygulamadaki state değişikliklerini yalnızca bir yerde yaparak, kodun neredeyse tümünün okunaklı ve sürdürülebilir kalmasını sağlar. Böylece uygulama, büyüdükçe daha az karmaşık hale gelir.

Redux'un kullanımı, uygulamayı yazarken birkaç farklı adımdan oluşur. Öncelikle, uygulamada kullanılacak olan state, bir store içinde yönetilir. Ardından, herhangi bir değişiklik olduğunda, bir action tetikleyici çağrılır. Bu action, yapılan değişiklikleri store'a gönderir. Son olarak, değişiklikleri handle etmek için bir reducer fonksiyonu kullanılır.

Redux, React ile birlikte kullanıldığında, uygulamanın reactive özellikleri nedeniyle herhangi bir yerde kullanılabilir. Store'a yapılan değişiklikler, otomatik olarak React'taki component'leri güncellemeye başlar. Bu süreç, uygulamada bir değişiklik olduğunda daha güçlü bir uygulama geliştirmeye yardımcı olur.

Bu makalede, React ve Redux birlikte kullanılarak nasıl bir uygulama geliştirileceği, Redux içindeki actions ve reducers, selector'ların kullanımı, middleware'lerin kullanımı, React Hooks ve Redux'un birleştirilmesi, ve Redux Toolkit kullanımı gibi önemli konulardan bahsettik. Artık React uygulamalarınızda state yönetimini nasıl geliştirebileceğinizi biliyorsunuz.

Redux'a Giriş

Redux, React uygulamalarında state yönetimi için kullanılan bir JavaScript kütüphanesidir. Bu kütüphane, uygulamanın state'ini tek bir yerde toplayarak, state yönetimini basitleştirmeyi amaçlar. Redux, uygulamanın state'ini, yan etkisiz reducer fonksiyonları aracılığıyla değiştirebilir.

Redux, özellikle büyük uygulamalarda, uygulamanın state'inin yönetimini kolaylaştırır. Uygulamanın state'ini, tek bir yerde tutarak, state'in kapsamı hakkında daha büyük bir görünüm sağlar. Bu sayede, uygulama daha kolay anlaşılabilir hale gelir ve hata ayıklamanın yanı sıra, çeşitli bileşenler ve sayfalar arasında state paylaşımını da kolaylaştırır. Redux, JavaScript kütüphanesi olması nedeniyle, herhangi bir JavaScript framework'ü ile kullanım sağlayabilir. Ancak, React ile uyumluğu daha kolay ve doğrudan desteklenmektedir.

Redux'un temel kavramları: Store, Action, Reducer.

Store - Bu, uygulamanın state'ini tuttuğu tek noktadır. Bu nedenle, state'in tümü bu depoda bulunur ve uygulamanın herhangi bir yerinde ulaşılabilir olur. Store'un direkt olarak değiştirilmesi mümkün değildir. Bunun yerine, Action'lar kullanarak değişiklik yapılır.

Action - Bu, uygulamanın state'ini değiştirmek için kullanılan JavaScript nesneleridir. Yapılacak değişikliğin türünü belirlerler. Örneğin, bir butona tıklama gibi kullanıcı etkileşimlerini yakalamak ve uygulamanın yan etkisiz şekilde güncellenmesini sağlamak için kullanılır.

Reducer - Bu, Action'ların state'i nasıl değiştireceğini belirleyen fonksiyonlardır. Reducer'lar, mevcut state'i ve Action'i alır ve yeni bir state döndürürler. Bu state, Store'da güncellenir. Reducer'lar, mutlaka yan etkisiz olmalıdırlar, yani, dışarıya bir etki yapmamalıdırlar.

React ve Redux'un Birlikte Kullanımı

React, kullanıcı arayüzlerini oluşturmak için en popüler frameworklerden biridir. Ancak, büyük uygulamaların state yönetimi zorluklarının üstesinden gelmek için, ek bir çözüme ihtiyaç duyulur. Bu noktada Redux devreye girer ve React uygulamalarının state yönetiminin daha kolay olmasını sağlar.

React ve Redux birlikte kullanıldığında, React bileşenleri, Redux store'undaki state verilerine kolayca erişebilirler. Bu sayede, state yönetimi daha organize, daha kolay ve daha etkilidir. Ayrıca, Redux, state değişimlerini izlemek için kullanıcı tanımlı fonksiyonları da kolaylaştırır.

Özellikle büyük ölçekli uygulamalar için, Redux kullanmak, uygulamanın kapsamlı bir state yönetimi sağlamasına yardımcı olur. Bu, uygulama boyutunu azaltarak performansı arttırmaya ve uygulama kodlarının daha kolay organize edilmesine olanak sağlar.

React ve Redux birlikte kullanıldığında, uygulama geliştiricilerinin kod kalitesini de arttırmalarına yardımcı olur. Uygulama, daha az hataya sahip olma eğilimindedir ve uygulama geliştiricileri, uygulamanın sorunlarını daha hızlı çözebilirler. Bu nedenle, uygulama geliştirmek isteyenlerin, Redux'u kullanarak state yönetimini kolaylaştırabileceklerini unutmamaları gerekir.

Actions ve Reducers

Redux, birçok farklı bileşeni içeren bir state yönetimi bibliyotekidir ve bu bileşenlerden en önemlileri actions ve reducers'dır. Action, uygulamanızda gerçekleşen bir olayı temsil eder ve reducer'lar, uygulamadaki state değişikliklerini yönetir. Actions, uygulamadaki herhangi bir değişikliği temsil edebilirler, örneğin login işlemini gerçekleştirme, bir postu oluşturma veya silme gibi. Action'lar, her zaman bir tip ve bir veri nesnesi içerirler.

Reducer'lar, action'lar tarafından gönderilen verileri kullanarak uygulamanın state'ini günceller. Reducer, mevcut state'ı ve action verilerini birleştirerek yeni bir state üretir. Bir uygulamada birden fazla reducer olabilir ve her reducer, uygulamanın farklı state bölümlerinde çalışabilir.

Redux kullanırken, her bir action tipi için bir reducer yazmanız gereklidir. Reducer'lar, bir switch ifadesi kullanarak action tipini kontrol ederler ve gelen verilerle birlikte state'i güncellerler. Ayrıca varsayılan state değerini de belirlemelisiniz, böylece uygulamanız başlatıldığında ilk state değerleri atanır.

Burada ilk olarak initialState adlı bir değişken tanımlanır. Bu değişken, uygulamanın state'inin varsayılan değeridir. Daha sonra, reducer fonksiyonuna, gelen action ve state verileri atanır. Switch ifadesi, action'ın tipine göre hareket eder ve geriye state'i güncelleyen bir nesne döndürür. Varsayılan durumda, aynı state değeri geri döndürülür.

Actions ve reducer'lar, Redux'un temel yapı taşlarıdır ve uygulamanızın state yönetiminde hayati bir rol oynarlar. Ne zaman ki bir action gerçekleşir, reducer'lar devreye girer ve state değerini güncellerler.

Action Creator'lar

Action creator'lar, Redux işlemi yapan fonksiyonlardır. Bu fonksiyonlar, reducerlarda kullanılacak olan action nesnelerini yaratır ve Redux'a gönderir. Gelen bu action nesneleri, Redux store üzerindeki state'i güncelleyen işlemi başlatır. Tek bir action creator, birden fazla action yaratabilir.

Action creator'lar, genellikle Redux'ta bulunan dispatch fonksiyonu ile birlikte kullanılır. Dispatch fonksiyonu, Redux store'a bir action gönderir. Bu şekilde, store üzerinde bulunan state güncellenmiş olur. Bir action creator, aşağıdaki gibi yazılabilir:

const ADD_TODO = 'ADD_TODO'; const REMOVE_TODO = 'REMOVE_TODO'; function addTodo(text) {  return {    type: ADD_TODO,    text  }}function removeTodo(id) {  return {    type: REMOVE_TODO,    id  }}      

Yukarıdaki örnekte, addTodo ve removeTodo isimli iki farklı action creator fonksiyonu yer alıyor. Bu fonksiyonlar, ilgili action nesnelerini yaratıyor ve type alanına bir string değeri veriliyor. Type alanı, action'ın türünü gösterir. Ardından, her bir action nesnesi, Redux store üzerindeki state'i güncelleyen işlemi başlatmak için store.dispatch() fonksiyonuna gönderilir.

Action creator'ların kullanımı, Redux gibi karmaşık yapılar için oldukça önemlidir. Bu sayede, işlemler daha modüler bir yapıda oluşturulabilir ve işlem kodları daha okunaklı ve anlaşılır bir şekilde yazılabilir.

Selectors

Redux'ta state yönetiminde verileri seçmek için kullanılan Selectors kavramı, bir veri depolama mekanizması olarak Redux Store'dan alınan verileri manipüle etmek için kullanılabilir. Bu veriler, özel işlevler sayesinde çeşitli şekillerde dönüştürülebilir ve önceden hesaplanmış olarak saklanabilir.

Selectors, kodunuzu daha modüler ve okunaklı hale getirerek, işlevsellik ve performans açısından büyük bir fayda sağlar. Farklı bileşenler birbirine bağımlı olmadığından, değişiklik yapıldığında sadece ilgili bileşene yapılması gereken değişiklikler daha kolay bir şekilde yapılabilir.

Bir Selector, genellikle react-redux kütüphanesi içindeki useSelector fonksiyonu kullanılarak kullanılır. Bu fonksiyon, tüm bileşenlerin kullanabileceği bir hook olarak, Store'da depolanmış olan verilere erişim sağlar. Bir Selector, state bağımlılıklarını takip ederek, yalnızca kendisine bağlı olan bileşenlerde yeniden hesaplanır.

Örneğin, bir uygulamada toplam ürün sayısını göstermek istediğimizi varsayalım. Bunun yerine tüm ürünleri ve her bir ürünün ayrıntılarını içeren büyük bir nesneyi almak yerine, sadece toplam sayıyı içeren bir nesneyi seçebiliriz. Bu, gereksiz veri alımını azaltacak ve performansı artıracaktır.

Selectors, kısacası, tek bir veri parçasına bağlı olan bileşenleri daha verimli ve performanslı bir hale getirerek, state yönetiminde büyük bir rol oynamaktadır.

Middleware'ler

Middleware, Redux'un önemli bir parçasıdır ve Redux'un temel özelliklerine nüfuz etmek için kullanılır. middleware, actions ve reducers arasındaki iletişimi düzenleyerek, ek işlevsellikler ekleyerek ve asenkron işlemleri yürüterek state yönetiminde büyük bir rol oynar.

Middleware, gerektiğinde ve ölçüldüğünde kullanılmalıdır çünkü gereksiz kullanımı performans sorunlarına ve anlaşılmaz kodlama anlaşmazlıklarına neden olabilir. Middleware kullanımının en yaygın alanları arasında izleme, senkronizasyon, oturum yönetimi, isteğe bağlı veri yükleme ve diğer özel işlevsellikler bulunur.

Middleware'ler genellikle fonksiyon olarak yazılır ve store'u değiştirir. Middleware'ler, applyMiddleware() fonksiyonuyla Redux store'a uygulanabilir. Middleware kullanımına örnek olarak Redux Thunk paketini getirebiliriz. Thunk, bir action creator değil, bir fonksiyondur ve farklı durumlarda farklı işlemler yürütür. Thunk kullanarak asenkron API çağrıları yapabilir ve store'a gelen yanıtlarla çalışabilirsiniz.

• Store'a özel middleware'ler oluşturabilirsiniz,
• Middleware'ler arızalandığında iç mekanizmalarını öğrenebilir veya hata ayıklayabilirsiniz,
• Thunks sayesinde Redux'u Redux Toolkit'in yanı sıra daha verimli bir şekilde kullanabilirsiniz.

Middleware kullanımı, Redux'ta öğrenmeniz gereken kilit konulardan biridir. Middleware'lerle yapılabilecek çok şey var ve Redux'u verimli bir şekilde kullanmak istiyorsanız, bu konuya kapsamlı bir şekilde hakim olmanız gerekiyor.

React Hooks ve Redux

React Hooks, React uygulamalarında kısa yoldan birçok işlemi kolaylaştıran bir özelliktir. Redux ile birlikte kullanıldığında ise, state yönetimini daha da kolaylaştırır. React Hooks, useSelector ve useDispatch gibi özellikleri ile Redux'u daha az kod yazarak kullanabiliriz.

useSelector, bir state'i almak için kullanılır. Böylece Redux store'undaki state, ilgili component içinde kullanılabilir hale gelir. useDispatch ise, Redux store'una action göndermek için kullanılır. Bu sayede, ilgili component'in state'inde bir değişiklik olması gerektiğinde, action göndererek state güncelleştirmesi yapılabilir.

Örneğin, bir form submit işlemi sırasında Redux store'unda bir değişiklik yapılması gerekiyorsa, useDispatch kullanarak yeni bir action oluşturulup, ilgili state güncellemesi yapılabilir. useSelector ise, bu güncellenmiş state'i ilgili component içinde kullanmak için kullanılabilir.

React Hooks ile Redux kullanarak, state yönetimi daha az koda ihtiyaç duyacak şekilde kolaylaşırken, kodun okunabilirliği ve yönetilebilirliği de artmış olur.

Overall, React Hooks and Redux together provide a powerful combination for simplified state management in React applications. With the useSelector and useDispatch features, we can easily access and modify the Redux store within individual components. By using these tools, we can significantly reduce the amount of code needed for state management and improve the overall readability and maintainability of our code.

useDispatch ve useSelector

React uygulamalarında state yönetimi için Redux kullanımı, React hooks ile birlikte daha da kolaylaşmaktadır. useDispatch ve useSelector, Redux'un kullanımını hooks yapısı ile React uygulamalarında kullanabileceğimiz iki önemli fonksiyondur. useDispatch, store içinde bulunan fonksiyonları uygulamamızda kullanabilmemizi sağlar. useSelector ise, store içinde bulunan verileri kullanarak uygulamamızda gösterim yapmamıza olanak sağlar.

useDispatch fonksiyonunun kullanımı oldukça kolaydır. Öncelikle useDispatch fonksiyonunu import etmemiz gerekir. Bunun için aşağıdaki kodu kullanabiliriz:

```import { useDispatch } from 'react-redux';```

Daha sonra, useDispatch fonksiyonunu kullanarak store içinde bulunan istediğimiz fonksiyonları çağırabiliriz. Şöyle bir örnek verebiliriz:

```import { useDispatch } from 'react-redux';import { addTodo } from './todosSlice';

function AddTodoForm() { const [title, setTitle] = useState(''); const dispatch = useDispatch();

const onSubmit = (event) => { event.preventDefault(); dispatch(addTodo({ id: nanoid(), title, completed: false })); setTitle(''); }

return (

Yukarıdaki örnekte, useDispatch fonksiyonunu kullanarak todosSlice içindeki addTodo fonksiyonunu çağırdık ve onSubmit fonksiyonu içinde yeni bir todo ekledik.

useSelector fonksiyonu ise store içinde bulunan verilere kolay erişim sağlar. Öncelikle useSelector fonksiyonunu import etmemiz gerekir. Bunun için aşağıdaki kodu kullanabiliriz:

```import { useSelector } from 'react-redux';```

Daha sonra, useSelector fonksiyonu ile store içindeki verileri kullanarak uygulamamızda gösterim yapabiliriz. Örnek vermek gerekirse:

```import { useSelector } from 'react-redux';import Todo from './Todo';import { selectTodos } from './todosSlice';

function TodoList() { const todos = useSelector(selectTodos);

return (

{todos.map(todo => )}

Yukarıdaki örnekte, useSelector fonksiyonu ile todosSlice içindeki selectTodos fonksiyonunu çağırdık ve todoList içindeki todos değişkenine atadık. Daha sonra todos değişkenini kullanarak todoList içindeki uygulamamızda gösterim yaptık.

Kısacası, useDispatch ve useSelector fonksiyonları, Redux kullanımını hooks yapısı ile daha da kolaylaştıran iki önemli fonksiyondur. Yukarıdaki örneklerde de gördüğünüz gibi oldukça basit bir kullanıma sahiptirler ve React uygulamalarında state yönetimini kolaylaştırırlar.

Redux Toolkit Kullanımı

Redux Toolkit, Redux kullanımını kolaylaştıran ve hızlandıran bir kütüphanedir. Klasik Redux kullanımından farklı olarak, daha az kod yazarak aynı işlemleri gerçekleştirebilirsiniz.

Redux Toolkit, aşağıdaki özelliklere sahiptir:

• createSlice: Bu fonksiyon, Redux'ta state ve reducer oluşturmayı kolaylaştırır. Tek bir yerden, state ve reducer oluşturabilirsiniz.
• configureStore: Bu fonksiyon da aynı işleve sahip olmakla birlikte, projenin kullanımına göre optimize edilebilir.
• immer: Bu kütüphane, state değiştirme işlemini kolaylaştırır. Projede state'i değiştirmek için daha az kod yazmanıza olanak sağlar.

Redux Toolkit'in kullanım avantajlarını özetleyecek olursak:

• Kod karmaşıklığını azaltır.
• Daha hızlı ve daha az kod yazmanızı sağlar.
• Ölçeklenebilirliği ve performansı artırır.
• Derinlemesine devlet yönetimine ihtiyaç duyulan projelerde kullanılması önerilir.

createSlice

createSlice, Redux Toolkit içinde bulunan bir fonksiyondur ve Redux'a entegre edilmiş birkaç fonksiyondan sadece biridir. State yönetimi yapmak için Redux kullanılırken, reducer'ların yazılması gereklidir. Redux Toolkit ise, bu reducer'ların basitleştirilmesi ve zaman kazanılması için geliştirilmiştir. createSlice fonksiyonu da burada devreye girer.

createSlice ile, bir reducer fonksiyonu, bir set of actions ve action creators oluşturmak için sadece birkaç satır kod yazılabilir. Bu sayede, redundant kod tekrarları en aza indirgenir ve state yönetimi daha kolay hale gelir.

Aşağıdaki örnek kodda, createSlice fonksiyonunun nasıl kullanıldığı gösterilmiştir:

```import { createSlice } from '@reduxjs/toolkit';

const initialState = {...};

export const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; }, /* add more reducers here */ },});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;```

Yukarıdaki kodda, bir counter state'inin nasıl yönetileceği gösterilir. initialState ile, başlangıçta state'in nasıl görüneceği tanımlanır. createSlice fonksiyonu içinde, counter state'i için bir reducer oluşturulur ve increment ve decrement fonksiyonları, reducer'da tanımlanır. createSlice fonksiyonu, otomatik olarak bu fonksiyonlar için action creators oluşturur. Bu sayede, state'i değiştirmek için sadece action creators çağrılır.

Kısacası, createSlice fonksiyonu, Redux Toolkit tarafından sağlanan ve Redux ile state yönetimini kolaylaştıran bir fonksiyondur. Birkaç satır kod ile reducer'lar, actions ve action creators oluşturulabilir. Bu sayede kod tekrarlarını en aza indirerek state yönetimi daha hızlı ve daha kolay hale gelir.

configureStore

Redux Toolkit'de, Redux'un yapılandırılması sırasında kullanılan en önemli özelliklerden biri de configureStore fonksiyonudur. Bu fonksiyonla tek bir yerden tüm store'un yapılandırması gerçekleştirilir. Bu sayede birden fazla yapılandırma dosyasının yönetimi azaltılır.

configureStore, birkaç özellik ile birlikte kullanılabilir. Bunlar arasında reducer, middleware, devTools ve enhancer yer alır. Bu özellikler, Redux Toolkit'in tüm avantajlarını kullanmak için harika bir yaklaşımdır.

DevTools özelliği özellikle önemlidir. Bu, Redux Toolkit'in sunduğu özellikler arasında öne çıkan bir özelliktir. Bu özellik sayesinde, uygulamanın geliştirme işlemleri sırasında state değişiklikleri kolayca takip edilebilir. Geliştirme süreci daha da kolaylaştırılır.

Enhancer, tüm middleware'leri çalıştırmaya yardımcı olan bir özelliktir. Bir uygulama için middleware kullanıldığında configureStore fonksiyonunun bu özelliği devreye girer ve middleware'ler otomatik olarak tanımlanmış olur. Enhancer sayesinde middleware'leri manuel olarak tanımlama ihtiyacı ortadan kalkar.

configureStore, Redux'un yapılandırılması sırasında kullanılırken çok sayıda avantaja sahiptir. Bu özellikle birlikte kullanıldığında, tüm yapılandırmalar tek bir yerden yönetilir ve uygulama geliştirme süreci daha da optimize edilir.

Proje Örneği

React ve Redux'un birarada kullanımı, state yönetimi için en iyi yöntemleri sunmakta. Bir projede React ve Redux kullanarak, örnek bir uygulama oluşturmak mümkün. Bu örnek proje, farklı sayfalardan oluşan basit bir blog sitesi uygulaması olabilir.

Uygulama, öncelikle Redux store'unun oluşturulmasıyla başlar. Ardından, reducer'lar ve action'lar ile state yönetimi yapılır. Reducer, state nesnesinin nasıl değiştirileceğini belirlerken, action tam olarak hangi değişikliğin yapılacağını tanımlar. Bu örnek uygulamada yer alan reducer'lar, örneğin bir "Post" nesnesini güncelleyecek actionlara yanıt verebilir.

Proje örneğinde yer alan bir diğer önemli özellik, selector'lar. Selectors, state nesnesindeki belirli bir alanı seçmek için kullanılır ve performans arttırıcı bir etkiye sahiptir. Örneğin, "Post" nesnesinin yalnızca belirli bir kısmına ihtiyaç varsa, selector'lar bunu işlem yapmadan hızlı bir şekilde seçmenizi sağlar.

Ayrıca, örnek proje için Redux Toolkit de kullanılabilir. Bu araç, Redux'u daha kolay ve kullanışlı hale getirir. Özellikle, createSlice fonksiyonu ile reducer'ların basit bir şekilde yazılması ve configureStore fonksiyonu ile store'un yapılandırılması sağlanır.

Proje örneği kodlarına göz atmak isterseniz, aşağıdaki örneğe bakabilirsiniz.