Installatie van Redux en RTK in een React-applicatie

In deze les installeren we in onze applicatie het pakket React-Redux, dat het mogelijk maakt voor React-componenten om samen te werken met Redux en de tool Redux Toolkit (afgekort RTK).

Open ons project en typ in de terminal de volgende opdracht:

npm install @reduxjs/toolkit react-redux

Nu moeten we een store aanmaken, waarin de globale staat van onze applicatie wordt opgeslagen. Om te beginnen maken we in de map src een map app aan, en daarin een bestand store.js. Vervolgens moeten we in dit bestand configureStore importeren uit RTK:

import { configureStore } from '@reduxjs/toolkit'

Vervolgens maken we een lege store aan en geven we ten minste één reducer door:

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

Om ervoor te zorgen dat onze React-componenten kunnen werken met de store, doen we het volgende. We gaan naar ons bestand main.jsx, waarin de code al staat:

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

In de import voegen we regels toe met de op de vorige stap gemaakte store en de component Provider:

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

Vervolgens wikkelen we onze hoofdcomponent App in de Provider, en geven we deze als prop de store:

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

En tenslotte plaatsen we in de hoofd-React-component App de volgende code:

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

export default App

We starten ons project opnieuw op en zien in de browser: 'This is my first Redux app!'. Let voorlopig nog niet op de waarschuwing over de afwezigheid van een geldige reducer. Het is je gelukt, gefeliciteerd :).

Installeer Redux en RTK in je applicatie, zoals beschreven in de les. Zorg ervoor dat je applicatie werkt.