Redux və RTK-nin React Tətbiqinə Quraşdırılması

Bu dərsdə biz tətbiqimizə React komponentlərinin Redux ilə işləməsini təmin edən React-Redux paketini və Redux Toolkit (qısaca RTK) alətini quraşdıracağıq.

Layihəmizi açaq və terminalda aşağıdakı əmri daxil edək:

npm install @reduxjs/toolkit react-redux

İndi bizə tətbiqimizin qlobal vəziyyətinin saxlanacağı store yaratmaq lazımdır. Başlamaq üçün src qovluğunda app qovluğu yaradacağıq və onun içində store.js faylı yaradacağıq. Sonra bu fayla RTK-dan configureStore import etməliyik:

import { configureStore } from '@reduxjs/toolkit'

Daha sonra boş store yaradıb ən azı bir reducer ötürəcəyik:

export default configureStore({
	reducer: {}
});

React komponentlərimizin store ilə işləyə bilməsi üçün aşağıdakıları edəcəyik. Artıq kodumuzun olduğu main.jsx faylına daxil olaq:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
)

Import-a əvvəlki addımda yaratdığımız store və Provider komponenti ilə əlaqəli sətirləri əlavə edək:

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

Sonra əsas App komponentimizi Provider içində əhatə edək və ona prop kimi store ötürək:

<React.StrictMode>
	<Provider store={store}>
		<App />
	</Provider>
</React.StrictMode>

Və nəhayət, əsas React komponenti App-də aşağıdakı kodu yerləşdirək:

function App() {
	return <h2>This is my first Redux app!</h2>
}

export default App

Layihəmizi yenidən işə salaq və brauzer pəncərəsində görək: 'This is my first Redux app!'. Etibarlı reducer olmaması barədə xəbərdarlığa hələlik fikrimizi verməyək. Siz uğur qazandınız, təbriklər :).

Redux və RTK-ni dərsdə təsvir olunduğu kimi tətbiqinizə quraşdırın. Tətbiqinizin işlədiyinə əmin olun.