Redux-ի և RTK-ի տեղադարում React հավելվածում

Այս դասին մենք կտեղադրենք մեր հավելվածում React-Redux փաթեթը, որն թույլ է տալիս React կոմպոնենտներին աշխատել Redux-ի հետ միասին և Redux Toolkit գործիքը (հապավումը RTK):

Բացենք մեր նախագիծը և տերմինալում մուտքագրենք հետևյալ հրամանը.

npm install @reduxjs/toolkit react-redux

Այժմ մեզ անհրաժեշտ է ստեղծել պահեստ (store), որտեղ կպահպանվի մեր հավելվածի գլոբալ վիճակը: Սկզբում src պանակում մենք կստեղծենք app պանակը, իսկ դրա մեջ store.js ֆայլը: Այնուհետև այս ֆայլում մենք պետք է իմպորտենք configureStore RTK-ից.

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-ի մեջ, և որպես prop կփոխանցենք դրան 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!': Վավեր reducer-ի բացակայության մասին նախազգուշացմանը առայժմ ուշադրություն չդարձնենք: Ձեզ ամեն ինչ հաջողվեց, շնորհավորում եմ :):

Տեղադրեք ձեր հավելվածում Redux և RTK, ինչպես նկարագրված է դասում: Համոզվեք, որ ձեր հավելվածն աշխատում է: