React Redux nasıl kullanılır?

/*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.
})

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>
)

//İ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

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,
  },
})

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/>
  
    )
  

}