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

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

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

terminalnpm install @reduxjs/toolkit react-redux

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

app/store.jsimport { configureStore } from '@reduxjs/toolkit'

Հաջորդը, կստեղծենք դատարկ store և կփոխանցենք գոնե մեկ reducer.

app/store.jsexport default configureStore({
  reducer: {}
});

Որպեսզի մեր React կոմպոնենտները կարողանան աշխատել store-ի հետ, մենք կանենք հետևյալը. Կմտնենք մեր main.jsx ֆայլը, որտեղ արդեն կա կոդ.

main.jsximport 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 կոմպոնենտի տողերը.

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

Այնուհետև կփաթաթենք մեր գլխավոր App կոմպոնենտը Provider-ի մեջ, և որպես prop կփոխանցենք դրան store-ը.

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

Եվ, վերջապես, գլխավոր React կոմպոնենտում App կտեղադրենք հետևյալ կոդը.

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

export default App

Կրկին միացնում ենք մեր նախագիծը և տեսնում ենք բրաուզերի պատուհանում. 'This is my first Redux app!': Վավեր reducer-ի բացակայության մասին նախազգուշացմանը առայժմ ուշադրություն չդարձնենք: Ձեզ ամեն ինչ հաջողվեց, շնորհավորում եմ :):