- Mesaj
- 590
- Çözümler
- 3
- Beğeni
- 739
- Puan
- 814
- Ticaret Puanı
- 0
Bu konuda sizlere react.js projelerinize Redux kurmayı göstermek istiyorum,
herhangi bir ön yazı veya kafa karıştırıcı bir anlatıma girmeden direkt olarak kullanımını göstereceğim.
Not: Bu konuda redux nedir, neden kullanılır gibi konulara değinmeyeceğim bu konular hakkında bilgileri diğer blog yazılarından edinebilirsiniz.
Adım-1:
Bir react.js uygulaması oluşturun.
Adım-2:
Oluşturduğumuz react.js uygulamasına gerekli olan modülleri yüklememiz gerekmekte.
Adım-3:
Store oluşturma: Bu aşamada reducer'larınızı tutacağınız bir dosya oluşturmanız gerekmekte, Dosya adı için herhangi bir isim verebilirsiniz fakat yaygın kullanımı store.js 'dir.
Adım-4:
Provide ekleme.
Adım-5:
Slices: Her reducer'ımız için oluşturmamız gereken durum dilimleri vardır, bu durum dilimleri reducer'ın uğradığı değişiklikleri belirlediğimiz işlemlerden gerçirmek için kullanılır.
Örnek olması için Page adında bir reducer oluşturalım.
Adım-6
Reducer'ımızı oluşturduktan sonra bu reducer'ı store içerisinde tanımlamamız gerekmekte, bu işlem ise şu şekildedir.
Buraya kadar olan adımlarda başarılı bir şekilde redux mimarisini projemize dahil etmiş ve 1 reducer oluşturmuş bulunmaktayız.
Oluşturduğumuz bu reducer'ı projenin herhangi bir yerine çağırmak için
useSelector
reducer üzerinde bir değişiklik yapmak için ise
useDispatch
kullanmamız gerekmekte. Bu iki bileşeninde kullanımını küçük bir örnekle göstereyim.
Umarım sade ve amacına yönelik bir anlatım olmuştur.
İyi forumlar
herhangi bir ön yazı veya kafa karıştırıcı bir anlatıma girmeden direkt olarak kullanımını göstereceğim.
Not: Bu konuda redux nedir, neden kullanılır gibi konulara değinmeyeceğim bu konular hakkında bilgileri diğer blog yazılarından edinebilirsiniz.
Adım-1:
Bir react.js uygulaması oluşturun.
Create React App::
npx create-react-app UygulamaAdı
Adım-2:
Oluşturduğumuz react.js uygulamasına gerekli olan modülleri yüklememiz gerekmekte.
Install Modules::
npm install react-redux @reduxjs/toolkit
Adım-3:
Store oluşturma: Bu aşamada reducer'larınızı tutacağınız bir dosya oluşturmanız gerekmekte, Dosya adı için herhangi bir isim verebilirsiniz fakat yaygın kullanımı store.js 'dir.
store.js:
/*Burada configureStore bileşenini redux modülü içerisinden
çağırmamız gerekmekte, bu bileşen ile birlikte reducer'larımız için
kapsayıcı olacak bir bölüm oluşturacağız.*/
import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
reducer: {}, // Bu alana daha sonra reducer'larımızı aralarında "," ile ekleyeceğiz.
})
Adım-4:
Provide ekleme.
index.js:
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
//store => Adım 3'de oluşturduğumuz store.js dosyasını index içerisine çağırıyoruz.
import store from './app/store'
//react-redux modülünden "Provider bileşenini çağırıyoruz."
import { Provider } from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<App /> /*bileşenini içerisine alacak şekilde Provider' bileşenini ekliyoruz ve
Provider'ın store prop'una öncesinde oluşturduğumuz ve index.js içerisine
import ettiğimiz "store" bileşenini yazıyoruz.
*/
<Provider store={store}>
<App />
</Provider>
)
Adım-5:
Slices: Her reducer'ımız için oluşturmamız gereken durum dilimleri vardır, bu durum dilimleri reducer'ın uğradığı değişiklikleri belirlediğimiz işlemlerden gerçirmek için kullanılır.
Örnek olması için Page adında bir reducer oluşturalım.
JavaScript:
//İlk olarak redux-toolkit içerisinden createSlice bileşenini çağırıyoruz.
import { createSlice } from "@reduxjs/toolkit";
export const page = createSlice({
name: 'page', //Reducer'ımız için name değeri (herhangi bir önemi yok istediğinizi yazabilirsiniz)
initialState: { // Bu bölümde reducer için başlangıç değerimizi veriyoruz.
/* Bu değer sayısal olmak zorunda değil, bir array veya string veya true-false...vb.
veri tiplerinide kullanabilirsiniz.*/
value: 1,
},
/*Bu bölümde ise reducer'ımıza ait aksiyonları oluşturacağız.*/
reducers: {
/*Örnek: Burada changePage ile gönderilen değeri reducer'ımızın
value değerine eşitleme işlemi yapılmıştır.*/
changePage: (state, action) => {
state.value = action.payload //action değiştirilebilir bir değerdir fakat ".payload" bölümü sabittir.
}, // bir sonraki aksiyonu yazmak için virgül koymayı unutmayın!
/*Burada ise page değerimizi 1 arttırıyoruz.*/
nextPage: (state) => {
state.value += 1
}
}
})
// Reducer'ı ve oluşturduğumuz action'ları export(dışarıya aktarmak) ediyoruz.
export const { changePage, nextPage } = page.actions
export default page.reducer
Adım-6
Reducer'ımızı oluşturduktan sonra bu reducer'ı store içerisinde tanımlamamız gerekmekte, bu işlem ise şu şekildedir.
store.js:
import { configureStore } from '@reduxjs/toolkit'
// pageReducer benim belirlediğim bir isimdir herhangi bir isimle çağırabilirsiniz.
import pageReducer from './slices/page'
export default configureStore({
reducer: {
//Not: buradaki "page" daha sonra bu reducer'a ulaşmak için kullanacağımız isimdir.
page: pageReducer,
},
})
Buraya kadar olan adımlarda başarılı bir şekilde redux mimarisini projemize dahil etmiş ve 1 reducer oluşturmuş bulunmaktayız.
Oluşturduğumuz bu reducer'ı projenin herhangi bir yerine çağırmak için
useSelector
reducer üzerinde bir değişiklik yapmak için ise
useDispatch
kullanmamız gerekmekte. Bu iki bileşeninde kullanımını küçük bir örnekle göstereyim.
Example.jsx:
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
export default Example = () => {
/*Oluşturduğumuz page reducer'ındaki value değerini bu şekilde alıyoruz.
Bu değeri istediğiniz herhangi bir yerde kullanabilirisiniz.*/
const page = useSelector((state) => state.page.value)
//Değişiklik yapabilmek için dispatch'ımızı alıyoruz.
const dispatch = useDispatch()
return (
<div>
{console.log(page)}
/*Butona tıklandığında reducer'ımız içerisinde oluşturduğumuz
nextPage aksiyonunu çalıştıracaktır. Dispatch kullanma sebebimiz ise
bu çalışan aksiyon reducer değeri üzerinde bir değişiklik talebi
oluşturmamızdan kaynaklanmakta.
*/
<button
aria-label="Bir arttır"
onClick={() => dispatch(nextPage())}
>
Increment
</button>
/*Input içerisine girilen değeri changePage aksiyonuna göndererek
page değerimizi değiştirme işlemi yapılıyor. Karşı tarafta "action.payload"
ile gelen veri karşılanıyor.*/
<input
className={styles.textbox}
aria-label="Yeni Page Değerini Girin"
value={incrementAmount}
onChange={(event,value) => dispatch(changePage(value))}
/>
<div/>
)
}
Umarım sade ve amacına yönelik bir anlatım olmuştur.
İyi forumlar
Son düzenleme: