Εγκατάσταση του Redux και RTK σε μια React εφαρμογή

Σε αυτό το μάθημα, θα εγκαταστήσουμε στο πακέτο εφαρμογής μας React-Redux, που επιτρέπει στα React components να λειτουργούν σε συνδυασμό με το Redux και το εργαλείο Redux Toolkit (συντομογραφία RTK).

Ας ανοίξουμε το project μας και πληκτρολογήσουμε στο terminal την ακόλουθη εντολή:

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 components μας να λειτουργήσουν με το 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 που δημιουργήσαμε στο προηγούμενο βήμα και το component Provider:

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

Στη συνέχεια, τυλίγουμε το κύριο component App μέσα στο Provider, και του περνάμε ως prop το store:

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

Και, τέλος, στο κύριο React component App τοποθετούμε τον ακόλουθο κώδικα:

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

export default App

Ξεκινάμε ξανά το project μας και βλέπουμε στο παράθυρο του browser: 'This is my first Redux app!'. Προς το παρόν, αγνοούμε την προειδοποίηση για την απουσία έγκυρου reducer. Τα καταφέρατε, συγχαρητήρια :).