Redux ва RTK-ни React-иловага ўрнатиш

Бу машғулотда биз иловамизга React компонентларини Redux билан бирга ишлатиш имконини берадиган React-Redux пакети ва Redux Toolkit (қисқартмаси RTK) воситасини ўрнатамиз.

Лойиҳанимизни очиб, терминалда куйидаги буйруқни киритамиз:

npm install @reduxjs/toolkit react-redux

Энди биз иловамизнинг глобал ҳолати сақланадиган store - хазина яратишимиз керак. Бошлаш учун src папкасида app папкасини яратамиз, унда эса store.js файлини. Сўнг бу файлга биз RTK дан configureStore ни импорт қилишимиз керак:

import { configureStore } from '@reduxjs/toolkit'

Кейин бош store яратиб, камида битта reducer узатамиз:

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

React компонентларимиз store билан ишлай олиши учун биз куйидаги амалларни бажарамиз. Бизнинг main.jsx файлимизга кирамиз, унда аллақачон код мавжуд:

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>,
)

Импортга биз аввалги қадамда яратилган store ва компонент Provider ни қўшамиз:

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

Кейин бизнинг асосий компонент App ни Provider ичига оламиз, ва пропс сифатида унга store ни узатамиз:

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

Ва, ниҳоят, асосий React компоненти App да куйидаги кодни жойлаштирамиз:

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

export default App

Лойиҳанимизни яна ишга туширамиз ва браузер ойнасида курамиз: 'This is my first Redux app!'. Яроқли редьюсер йўқлиги ҳақидаги огоҳлантиришга ҳозирча эътибор бермаймиз. Ҳамма нарса сизга муваффақ бўлди, табриклайман :).

Иловангизга Redux ва RTK-ни дарсда тавсифиланганидек ўрнатинг. Иловангиз ишлаётганига ишонч ҳосил қилинг.