Redux JavaScript kütüphaneleri ile kullanılan bir teknik yada State management kütüphanesidir. React , Angular, Vue gibi teknolojilere de entegre edilip kullanlabilir. Redux state leri tekbir yerden kullanmamızı sağlayarak componentler arası karmaşıklığı önleyerek esnek ve basitleştirilmiş bir yapı sunar. Yani aynı seviyede birden çok içiçe component yapısı çok olduğunda birbirleri arasında veri iletişimde ve veri aktarımında karışıklıkları önleme durumda Redux global seviyede bir store sağlar.
Aşağıdaki resimde olduğu gibi normal React yapısında bir methoda ihtiyaç varsa sürekli propslarla taşımamız gerekiyor. Buda zor ve meşakkatli bir iş oluyor. Redux ile herhangi bir katmandaki herhangi bir şeyi props geçmeden direckt alabilirsin.
Redux temelinde 3 ana kavram var bunlar State, Actions ve Reducers.
State : Redux’ın temeli alan state, uygulamanın mevcut state’i demektir. State’leri tek bir yerden yönetilebilir böylece herhangi bir component state’e erişebilir veya değiştirebilir.
Actions : Kullanıcı herhangi bir durumda tetikleme yaptığında ki olaydır. Bu da state’in değişmesini tetikler. Mesela bir buton’a tıklanıldığında state’in değişmesini sağlayabilir.
Reducers: Uygulama state’inde kullanılan fonksiyonlardır. Bir Reducer, önceki state’i ve fonksiyonu alır, bu fonksiyona dayanarak yeni bir state oluşturur ve bu yeni state’i depoya kaydeder.
Daha basit tabirle redux içine aktaracağın şeyleri koy ve işini gör kim erişmek istiyorsa erişsin ve bunun için de Reducer ları kullansın demektedir. Data detaylı bilgi için linkine bakılabilr.
Biz React projesi üzerinden ele alacağız. Oluşturduğumuz bir React projemize terminal üzerinden aşağıdaki paketleri kuruyoruz.
|
1 2 3 |
npm install @reduxjs/toolkit |
Sonra
|
1 2 3 |
npm install react–redux |
Sonra store.jsx ekleyipmethodunu yazdım
|
1 2 3 4 5 6 7 8 9 10 |
import { configureStore } from “@reduxjs/toolkit”; import countReducer from “../Counter/counterSlice”; export default configureStore({ reducer: { click: countReducer, }, }); |
Sonra main.jsx e tanıttım
|
1 2 3 4 5 |
<Provider store={store}> <App /> </Provider> |
Sonra Counter.jsx adında bir component ekleyerek içeriğini yazdım
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { useDispatch, useSelector } from “react-redux”; import { decrement, increment, selectCount,incrementByAmount } from “./counterSlice”; import { useState } from “react”; export default function Counter() { const [amount,setAmount] = useState(0); const value = useSelector(selectCount); const dispatch = useDispatch(); return ( <> <br></br> <button onClick={() => dispatch(decrement())}>Decrement</button> <span className=“text”>{value}</span> <button onClick={() => dispatch(increment())}>Increment</button> <br></br> <input value={amount} onChange = {(e) => setAmount(e.target.value)}></input> <button onClick={() => dispatch(incrementByAmount({val:parseInt(amount)}))}>Increment By Amount</button> </> ); } |
Sonra App.jsx e tanıttım
|
1 2 3 |
<Counter/> |
Sonra counterSlice.jsx adında bir component ekleyerek asıl işin döndğüğü olayları yazdum
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import { createSlice } from “@reduxjs/toolkit”; export const counterSlice = createSlice({ name: “click”, initialState: { //başlangış değeri value: 0, }, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; }, incrementByAmount: (state, action) => { //dışardan parametre alındığında state.value += action.payload.val; }, }, }); export const { increment, decrement, incrementByAmount } = counterSlice.actions; // acitonları(method) dışarı çıkardım export const selectCount = (state) => state.click.value; export default counterSlice.reducer; //reducer aktarır |
Aşağıda görüldüğü gibi redux yapısı kullanılarak sayı artırıp azaltabiliyoruz ve Redux uzantısı sayesinde de detaylarını takip edebiliriz.
ÖZET:
Redux tanımladıktan sonra
1-Provider ile app.jsx componentini kapsarsın bu tün componentlerden store ulaşabilmek içindir.
2-Toolkit te slase tanımlarız ve bunun için istediğimiz kadar state (değişken) tanımlayıp ulaşabiliriz
3-Bu slise larımızıda açmış olduğumuz store a bağlarız yada tanıtırız.
4-Slise içindeki state tanımlanır ve bunlara erişmek için useSelector() kullanılır , reducers içine methodlarımızı tanımlarız ve bunlarada erişmek için useDispatch() methodu kullanılır.
Uygulama kodlarına linkinden ulaşabilirsiniz.
Sağlıcakla kalın…
Bir yanıt yazın