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