React Projelerinde Derinlemesine Redux & Redux-Toolkit ve Birazda useReducer Hooks Kavramı

Official Site : https://redux-toolkit.js.org/

npx create-react-app toolkit-todos --template typescript	TypeScript templati kullanılan bir react projesi oluşturuldu.
npm i @reduxjs/toolkit react-redux	Redux Tookit indiriliyor, react-redux indiriliyor.

Redux Toolkit paketi, Redux mantığını yazmanın standart yolu olmasını amaçlamıştır. Temel Redux da ki karmaşıklığı ve fazladan kod yazmanın önüne geçilmesi sağlanmıştır.

• Store yapılandırması daha kolay hale gelmiştir.

• Paket kurulumları için kolaylıklar getirilmiştir. Ortak paketler toolkit ile birlikte gelmektedir.

• Ortak ve benzer kod yazımının önüne geçilmiştir.

Redux Toolkit konusuna geçmeden önce React-Redux ve useReducer Hook undan kısaca bahsetmek istiyorum.

Redux ve UseReducer Hook

Yukarıdaki resmi inceleyecek olur isek, Standart Redux mimarisinde store, reducers, actions ve types kavramı vardır. useDispatch ve useSelector ile komponentler içerisinde redux actionları ve state leri ile etkileşim sağlanır.

Eğer Standart Redux mimarisi hakkında bir bilginiz yok ise, öncelikle neden standart Redux yeterli gelmedi Toolkit kullanıyoruz sorusunu öncelikle cevaplamanızı tavsiye ederim. Zaten yukarıda paylaştığım REDUX mimarisi ve aşağıda paylaştığım mimariyi karşılaştırdığınızda bir çok fark göreceksiniz.

useReducer Hook u işimizi biraz daha kolaylaştırmakta burada action ları komponent içerisinde handle edebiliyoruz. Reducer yapısı bizim için yeterli olmakta.

Standart Redux, useReducer ve Redux Toolkit temelde benzer noktalarda işimizi çözmekte. Projeye başladığımızda işimizi hangi yapının çözeceği konusunda bilgili olmamız şart.

Benim şahsi kanaatim Front End mimarisi oluşturulması ve Thema, Auth, Rule, Role, Menu gibi kavramların ortak yapılarda oluşturulması. Service ve Api isteklerinde kod karmaşası olmadan ve kullanılabilirliğinin olduğu yapılar inşa etmek.

useReducer Hook ve React-Redux hakkında detaylı bir makale paylaşmak istiyorum ama şimdilik biz asıl konumuz olan Redux-Toolkit konumuza dönelim.

NOT : useReducer Hook ve React-Redux hakkında yukarıda bahsettiğim konu kafanızı karıştırdı ise hiç sorun değil okumamış gibi yapın ve aşağıya doğru devam edin.

2 şekilde proje oluşturulabilir.

ReactJS template ile redux paketini kurabilirsiniz veya TypeScript templatini kurabilirsiniz.

Ben TypeScript in daha güçlü olduğunu düşünerek, projelerimde bu paketi indirmeyi daha uygun görüyorum.

Projenizde Redux Toolkit kullanmadıysanız. aşağıdaki komutlar ile yüklenmesini sağlayabilirsiniz.

Toolkit içerisinde kullanımımıza sunular API ler ve ne oldukları belirtilmiştir.

configureStore()

Reducer ların tanımlanmasını sağlayan yapıdır. Genelde store adında klasör içerisinde index.js veya store.js içerisinde tanımlaması yapılır.

combineReducer()

configureStore içerisinde kullanılır, reducer ların combine (birleştirmek) için kullanılır. configureStore içerisinde syntax olarak configureStore tanımlamak biraz okunurluğu azalttığını düşünüyorum.

Bu yüzden iki farklı değişken olarak tanımlanmasını sağladım.

createSlice()

Slice komponent lerin oluşturulmasını sağlar.

createSlice içerisinde ; name, initialState ve reducers tanımlamalarını yapmamız gerekmektedir.

• name : Reducer adı.

• initialState : başlangıç State i.

• reducers : çalıştırılacak function lar.

createReducer()

Export olarak reducer tanımlaması ve dışa aktarımı sağlanıyor.

CreateAction()

export olarak dışa aktarılacak actions lar belirleniyor. Burada {} bu şekilde tanımlama yapmadan da kullanımı sağlanıyor, ama ben bu kullanımı daha temiz bulduğum için bu yapıyı kullanıyorum.

useDispatch()

createSlice içerisinde tanımlanan actionsların çalıştırılması için kullanılır.

useSelector(state => state.reducer)

Reducer içerisinde tanımlanan state bilgisine erişmek ve değişikliklerden haberdar olmak için kullanılır.

Redux Toolkit ile örnek bir structure aşağıdaki gibidir.

Yukarıdaki mimariyi inceleyecek olur isek; component ve slice ları bir birinde ayırdım ve domain bazlı klasörledim. Sonrasında store.js içerisinde en tepe kullanımı için tanımlamasını yaptım.

Okunurluğun güzel olması yanı sıra, anlık ihtiyaçların karşılanması ve yeni yapıların entegre edilmesi adına, bu mimari yaklaşımları her zaman önemlidir. Özellikle Thunk yapısı eklenmek istendiğinde veya service istekleri vb. iç içe giren kodlar yazmak yerine mimaride kendine has bir yer edinen yapılar kurmayı tercih ederim.

Sırası ile göstermeye çalıştım,

1. createSlice ile Reducer işlemlerimizi ve action işlemlerimizi yapıyoruz.

2. store.js içerisinde recucerları combine liyoruz.

3. İndex.js içerisinde en tepede Provider store {} kullanımını sağlıyoruz.

4. useDispatch veya useSelector kullanımını komponentler içerisinde sağlıyoruz.

REDUX TOOLKİT STRUCTURE

1) create-react-app my-app –template redux 2) create-react-app my-app –template redux-typescript	1) create-react-app my-app –template redux 2) create-react-app my-app –template redux-typescriptProje oluşturulur. 1) redux ile proje oluşturma 2) typescript template i ile redux proje oluşturma
npm install redux react-redux @reduxjs/toolkit	redux, react-redux ve redux-toolkit paketleri kurulur.
	Proje structure yapısı. components : Javascript komponentlerin olduğu klasör. store : Slice klasörleri ve store.js bulunan klasördür, (conbineReducer, configureStore) işlemleri yapılır. features : Slice komponentlerinin bulunduğu klasördür. (createSlice) tanımlaması yapılır ve her Slice dosyası için (slice.reducer, slice.actions) export işlemleri yapılır store.js : Reducerların projeye tanımlandığı ve dışarıya tek bir dosya çıkmasını sağlayan yapıdır.
	store.js dosyası içerisi conbineReducer ile features altında oluşturulan createSlice komponentleri tanımlanır. configureStore ile conbineReducer en tepedeki reducer olarak ayarlanır. Yeni bir Reducer eklediğimizde conbineReducer içerisine eklenmesi yeterli olacaktır.
	store -> feature; klasörü içerisinde domain klasörleri açılarak, createSlice işlemleri yazılmaya başlanır. createSlice içerisinde, name, initialState ve reducers tanımlaması yapılmaktadır. name : reducer isminin yanında (name/reducer) şeklinde otomatik oluşturulan yan isimdir. aşağıdaki Redux DevTools da aşağıdaki şekilde gözükmektedir. initialState : başlangıç state’i reducers : Slice içerisindeki tüm functions lar tanımlanır. loginSlice.reducer : LoginSlice Reducer olarak dışarıya aktarılıyor. loginSlice.actions : dışarıya açılacak tüm functionlar tanımlanıyor. Yöntem de bütün fonksiyonlar export edilirken 2. Yöntem ile istenilen fonksiyonlar export edilebilir.
	State Mutable işlemlerinin yapıldığı örnek bir Slice komponentidir. state.push : ile state e eleman eklenir. state.splice : ile state de eleman silinir. state[index] : ile statein index elemanına ulaşılıp değiştirilmesi sağlanır.
	index.js içerisinde en tepede Provider tanımlaması yapılmaktadır. store klasörü içerisindeki store.js burada store olarak kullanılmaktadır.
	useDispatch(); ile tanımlanan function lar tetiklenebilir. dispatch(function()) şeklinde. State içerisinde değişiklikler buradan yapabiliyoruz.
	useSelector(state => state.reducer); ile ilgili reducer in state bilgisine erişilebilir. bir şekilde statelerin değişmesi sonucunda useSelector bu değişikliği hemen algılayacaktır.

Yukarıda belirtilmiş olan örnek uygulamanın ekran görüntüsü ekteki gibidir. react DevTools görüntüsüde eklenmiştir.

Aşağıdaki sunumu izleyerek, redux-toolkit'in ön kullanımı ile ilgili bir bilgi edinebilirsiniz.

ReactJS ile @redux-toolkit

Projenin kodlarına buradan ulaşabilirsiniz.

#React #ReactRedux #ReduxToolkit #useReducer #useDispatch #useSelector #Actions #Reducers #createSlice #Provider #Store #combineReducer #configureStore