Redux Toolkit — Giriş

Bu mövzuda, React`da state management üçün ən çox istifadə olunan paketlərdən olan “Redux Toolkit”-ə giriş edəcəyik.

State management nədir?

Bəzən elə hallar olar bilir ki , biz müəyən bir data`nı , proqramın fərqli hissələrində istifadə etməli oluruq. Yəni elə dəyişənlər, funksiyalar olur ki , onlara proqramın fərqli hissələrində ehtiyac olur və necəsə onları istifadə edə bilməliyik. “Global state management” , global olaraq paylanılan dataların (Global state)` in idarə edilməsinə verilən addır. React`da kiçik və ortaölçülü proqramlarda , state management , Reactın rəsmi management sistemi olan Context APİ ilə aparılır. Proqramın ölçüsü , funksionallığı artdıqca , artıq əlavə state management tool`larından istifadə etməli oluruq.

Redux Toolkit ilə state management

İlk öncə boş bir react app yaradaq nümunə üçün.

Proqramı yaratdıqdan sonra isə , Redux Toolkit`i proqrama əlavə edək :

npm install @reduxjs/toolkit react-redux

Redux`u qurduq. İndi isə ardıcıllıqla :

1. Store faylımızı yaratmalıyıq — Redux`da, müxtəlif məqsədlər üçün istifadə ediləcək data`lar üçün müvafiq fayllar (slice`lar) olur. Misalçün saytın görünüşü ilə bağlı məlumatlar bir faylda (nümunə : AppearanceSlice) , istifadəçi məlumatları bir faylda (userSlice) saxlanmalıdır ki, idarə edilməsi daha rahat olsun. Bu fayllar yaradıldıqdan sonra isə , bu fayllardaki dataları komplektləşdirmək üçün , store faylımıza əlavə edirik.
2. Bütün proqramı, Redux Provider`ın daxilinə alacağıq — çünki, global state`dən danışırıqsa, proqramın hər komponentinə əlçatan olmalıdır global state`dəki datalar. Buna görə də , bütün komponentləri , Redux provider`in child komponenti halına gətirməliyik.
3. Ehtiyaca uyğun formada , yuxarıda qeyd etdiyimiz “Slice”-lar yaradırıq.

Addım 1 : Store`umuzu yaradaq

“src” qovluğunun içində, “store.js” faylımızı yaradaq :

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
 reducer: {

 },
})

Burada , ən sadə formada store`muzu yaratdıq. Dediyimiz kimi , store, slice`ların komplektləşdirildiyi hissədir. Növbəti mərhələdə yaradacağımız slice`ları, store`un daxilinə əlavə edəcəyik.

Addım 2 : Bütün proqramı, Redux Provider`ın daxilinə alaq

React proqramları, “index.js” faylından başlıayır. Yəni ki , ən top level kompnent burada olduğu üçün, Provide`ı bura yazmalıyıq. Çünki bütün komponentlər buradaki < App/> komponentinin alt komponenti olacaq. Ona görə də, buradan paylanan dəyərlər, alt komponentlərə əlçatan olacaq.

import React from ‘react’
import ReactDOM from ‘react-dom’
import App from ‘./App’
import { store } from ‘./app/store’

import { Provider } from ‘react-redux’ReactDOM.render(
 <Provider store={store}>
     <App />
 </Provider>,
 document.getElementById(‘root’)
)

Qeyd etdiyimiz kimi , ən top level komponent olan App kompnentini Redux provider`ın daxilinə aldıq və store props`una dəyər olaraq, az öncə yaratdığımız store faylını import etdik və props olaraq Provider`a verdik.

Addım 3 : Slice`larımızı yaradaq

Ssenari : Ekranda genişliyi və hündürlürlüyü 100px olan bir qutu olacaq. Əlavə olaraq da, 1 text inputumuz olacaq. O text inputa yazdığımız rəng kodu, qutunun arxaplan(background) rəngi olacaq.

İlk öncə “BoxSlice” adlı slice`mızı yaradaq :

import { createSlice } from “@reduxjs/toolkit”;

export const boxSlice = createSlice({
// Slice`mıza verdiyimiz ad
name : “BoxSlice” ,

// Slice`ın başlanğıc state`i
initialState : {bgColor: “#5674be”} ,

// State üzərində əməliyyat aparacağımız metodlar

reducers : {
// Qutunun rəngini dəyişəcək olan metodumuz
    changeColor : (state,action)=>{
            state.bgColor = action.payload ;
    }
  }
})

export const {changeColor} = boxSlice.actionsexport 
default boxSlice.reducer

Burada ən sadə formada slice`mızı yaratdıq. Qutunun rəngini dəyişəcəyimiz “changeColor” metodunu da, reducerlarımıza əlavə etdik. Bu method payload`ı (özünə arqument olaraq verilən dəyər) state`dəki “bgColor” propertie`sinə bərabər edəcək. Hansı ki bu dəyər bizim qutumuzun rəngini təmsil edir.

İndi isə bu Slice`ı , store`a əlavə etməliyik :

import { configureStore } from ‘@reduxjs/toolkit’
import boxReducer from ‘./reducers/BoxSlice’

export const store = configureStore({
  reducer: {
     box : boxReducer
  },
})

Reducer daxilində , “box : boxReducer” kimi bir sətr görürük. Burada “box” , müvafiq state`in key`idir. Gələcəkdə, bir bu su slice`a aid state istifadə etmək istəsək, bu key ilə çağıracağıq state`mizi.

İndi isə, “Box” komponentimizə baxaq.

import React from ‘react’import { useSelector } from “react-redux”;
import { changeColor } from ‘../../reducers/BoxSlice’;

/*
   Burada useSelector adlı metod import etmişik.
   Bu funksiya , global state`dəki dəyərlərə müraciət edib,
   onları oxuya bilməyimizə kömək edəcək.
*/

function Box() {
/*
   Burada, global state`ə müraciət edib, box key`i ilə təmsil etdiyimiz 
   boxSlice`a aid məlumatları oxumaq istədiyimizi qeyd edirik. Yuxarıda qeyd
   etmişdik ki , "box" açar sözdür və müvafiq slice`ın state`indəki
   dəyərləri oxumaq istədiyimizdə, ona ehtiyacımız olacaq.
*/
const boxState = useSelector(state=>state.box) ;


/*
  Artıq , "boxSlice" slice`nın state`ini oxuya bilirik. İndi isə, həmin state`də
  saxladığımız, "bgColor" (qutumuzun rənginbi təmsil edir) dəyərini oxuyub həm
  qutunun backgroundCOlor dəyərti olaraq verək , həm də ki dəyəri qutunun
  üzərinə yazdıraq.
*/

  return (
    <div style={{backgroundColor:boxState.bgColor}} className=’box-component’>
       {JSON.stringify(boxState.bgColor)}
    </div>
  ) ;

}

export default Box

Qutunun anlıq vəziyyəti

Bura qədər artıq bir çox şeyi öyrəndik. Redux toolkit`in qurulması, slice`ların yaradılması, dəyərlərin oxunması və s. İndi isə , state`də mövcus olan bir dəyəri necə dəyişə biləcəyimizə baxaq.

Mövcud nümunəmiz üzərindən davam edirik. Box komponentini çağırdığımız “App” komponentində, qutunun rəngini dəyişmək üçün , text input və button əlavə edək :

import ‘./App.css’;
import Box from ‘./components/Box/Box’;
import { useRef } from ‘react’;
import { useDispatch } from ‘react-redux’;
import { changeColor } from ‘./reducers/BoxSlice’;

/* 
  Burada "useDipatch" adlı funksiyanı import etmişik. Bu funksiya dispatcher 
  rolunu oynayır. Yəni ki , Slice`ların daxilində olan funksiyaları
  işlətmək üçündür. Əlavə olaraq , BoxSlice daxilində olan "changeColor" 
  funksiyasını daxil etmişik. Bu funksiya qutunun rəngini dəyişmək üçündür
  və dispatcher`in daxilində işlənir.
*/

function App() {
const textInputRef = useRef() ;
const dispatch = useDispatch() ;

return (
<div className=”App”>
  
  <Box />

  <div>
  <input ref={textInputRef} type=’text’ placeholder=’Add color code..’ />
  <button onClick={()=>dispatch(changeColor(textInputRef.current.value))}>Change</button>
  </div>

</div>
);
}

export default App;

Artıq, qutu rəngini dəyişəcəyimiz input text`i də yaratdıq. Artıq, button kliklənərkən, changeColor funksiyası işləyəcək, payload (dəyər) olaraq isə, text input`un dəyərini veririk. Yoxlayaq.

“Aqua” dəyəri verib klikləyək :

Bu qədər sadə.

Bu məqalədə , ən sadə formada, Redux Toolkit`ə giriş etdik. Maraq olarsa , 2ci hissəsini ən sonra isə RTK Query ilə bağlı olan 3cü hissədən danışmaq olar.

Oxuduğunuz üçün təşəkkürlər — Jahangir Seven.