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 კომპონენტებმა შეძლონ საცავთან მუშაობა, ჩვენ გავაკეთებთ შემდეგს. შევიდეთ ჩვენს ფაილში 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!'. შეტყობინებაზე ვალიდური reducer-ის არარსებობის შესახებ ჯერ ყურადღება არ მივაქციოთ. ყველაფერი გამოგივათ, გილოცავთ :).

დააყენეთ თქვენს აპლიკაციაში Redux და RTK, როგორც აღწერილია გაკვეთილში. დარწმუნდით, რომ თქვენი აპლიკაცია მუშაობს.