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

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

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

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

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

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

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

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

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

export default App

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

Εγκαταστήστε στην εφαρμογή σας τα Redux και RTK, όπως περιγράφεται στο μάθημα. Βεβαιωθείτε ότι η εφαρμογή σας λειτουργεί.