Installation af Redux og RTK i en React-applikation

På denne lektion vil vi installere pakken React-Redux i vores applikation, som gør det muligt for React-komponenter at arbejde sammen med Redux og værktøjet Redux Toolkit (forkortet RTK).

Åbn vores projekt og skriv følgende kommando i terminalen:

npm install @reduxjs/toolkit react-redux

Nu er vi nødt til at oprette et store (lager), hvor vores applikations globale tilstand vil blive opbevaret. Til at starte med, i mappen src, opretter vi en mappe app, og i den en fil store.js. Derefter skal vi importere configureStore fra RTK i denne fil:

import { configureStore } from '@reduxjs/toolkit'

Derefter opretter vi et tomt store og sender mindst én reducer med:

export default configureStore({
	reducer: {}
});

For at vores React-komponenter kan arbejde med storet, gør vi følgende. Gå ind i vores fil main.jsx, hvor vi allerede har koden:

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>,
)

I importen tilføjer vi linjer med den oprettede store fra forrige trin og komponenten Provider:

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

Derefter indpakker vi vores hovedkomponent App i Provider, og sender store med som en prop:

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

Og endelig placerer vi følgende kode i hoved-React-komponenten App:

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

export default App

Starter vi vores projekt igen, ser vi i browserens vindue: 'This is my first Redux app!'. Ignorer advarslen om manglen på en gyldig reducer foreløbig. Du har klaret det, tillykke :).

Installer Redux og RTK i din applikation, som beskrevet i lektionen. Sørg for, at din applikation fungerer.