Redux va RTK-ni React-ilovaiga o'rnatish

Ushbu mashg'ulotda biz o'zimizning ilovamizga React komponentlari Redux bilan hamkorlikda ishlashiga imkon beruvchi React-Redux paketi va Redux Toolkit (qisqartmasi RTK) vositasini o'rnatamiz.

Loyihamizni ochamiz va terminalda quyidagi buyruqni teramiz:

npm install @reduxjs/toolkit react-redux

Endi bizga ilovamizning global holatini saqlaydigan store omborini yaratish kerak. Boshlash uchun src papkasida app papkasini, uning ichida esa store.js faylini yaratamiz. Keyin ushbu faylga RTK dan configureStore ni import qilamiz:

import { configureStore } from '@reduxjs/toolkit'

Keyin bo'sh store yaratamiz va unga kamida bitta reducer uzatamiz:

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

React komponentlarimiz store bilan ishlashi uchun biz quyidagilarni bajaramiz. main.jsx faylimizga kiramiz, unda allaqachon kod mavjud:

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 ga oldingi qadamda yaratilgan store va Provider komponenti haqidagi qatorlarni qo'shamiz:

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

Keyin asosiy App komponentimizni Provider ga o'rab, unga prop sifatida store ni uzatamiz:

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

Va nihoyat, asosiy React komponenti App da quyidagi kodni joylashtiramiz:

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

export default App

Loyihamizni qayta ishga tushiramiz va brauzer oynasida ko'ramiz: 'This is my first Redux app!'. Yaroqli reducer yo'qligi haqidagi ogohlantirishga hozircha e'tibor bermaymiz. Hammasi joyida bo'ldi, tabriklayman :).

Redux va RTK ni darsda tavsiflanganidek ilovangizga o'rnating. Ilovangiz ishlayotganiga ishonch hosil qiling.