React Redux nasıl kullanılır?

LikapaTR

I LIKE TO BAN
Site yetkilisi
Admin
Grafiker
Geliştirici
Mesaj
523
Beğeni
631
Puan
814
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.

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:

Üst