Mala Anlatır Gibi React — 4: Redux

React (Resim, I.)

Redux nedir?

Redux, en kaba tâbir ile bir state management (durum yönetim) aracıdır. Bunu kullanmamızın nedenlerinden biri, uygulama çalışırken verileri saklayıp farklı kabaca sayfalara (component) iletmek.

Meselâ, giriş yaptığınız zaman bu giriş bilgisini her sayfaya iletilmesi gerek ki, ilgili sayfaya girdiğiniz vâkit hata alıp da tekrar giriş sayfasına yönlendirilmeyin.

Redux kurulumu.

npm paket yükleyicisi ile projemize gerekli 2 paketi kuruyoruz:

npm i react-redux @reduxjs/toolkit

App’i <Provider>ile sarmalıyoruz (verileri böylece tüm componentlar alacak):

import { Provider } from 'react-redux'
import store from './redux/store'

<Provider store={store}>
    <App />
</Provider>

İlgili store.js dosyası:

import { configureStore } from "@reduxjs/toolkit"
import counterSlice from ?
export const store = configureStore({
    reducer: {
         counter: counterSlice
    }
})

İlgili counterSlice.js dosyası:

import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
    name: 'counter',
    initialState: {
         // değerler
        sayi: 0
    },
    reducers: {
        // aksiyonlar
        arttir: (state)=>{
            state.sayi += 1
        },        
        azalt: (state)=>{
            state.sayi -= 1
        },
        degistir: (state, action)=>{
            state.sayi += Number(action.payload) 
        },
    }
})

export const {arttir, azalt, degistir} = counterSlice.actions
export default counterSlice.reducer

useDispatch ile fonksiyonları kullanmak:

import { useDispatch } from 'react-redux'
import { arttir, azalt, degistir } from './counterSlice'

const dispatch = useDispatch()

//örnek:
useDispatch(arttir())
useDispatch(azalt())
useDispatch(degistir(5))

useSelector ile veriyi almak:

import { useSelector } from 'react-redux'

const {sayi} = useSelector(state=> state.sayi)

veyahut
(state=> state.counter.sayi)

bu kadar basitti.

Farklı kullanımları mevcut fakat bunları sadece mantığını ve temelini kavramak için örneklendirdim.