Installasjon av Redux og RTK i en React-applikasjon

På denne timen skal vi installere pakken React-Redux i vår applikasjon, som gjør det mulig for React-komponenter å jobbe sammen med Redux og verktøyet Redux Toolkit (forkortet RTK).

La oss åpne prosjektet vårt og skrive følgende kommando i terminalen:

npm install @reduxjs/toolkit react-redux

Nå må vi opprette et store (lager) der den globale tilstanden til applikasjonen vår vil bli lagret. Til å begynne med, i mappen src, skal vi opprette en mappe app, og inne i den en fil store.js. Deretter må vi importere configureStore fra RTK i denne filen:

import { configureStore } from '@reduxjs/toolkit'

Deretter oppretter vi en tom store og sender med minst én reducer:

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

For at React-komponentene våre skal kunne jobbe med storen, gjør vi følgende. Vi går til filen vår main.jsx, som allerede inneholder 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 legger vi til linjer med den opprettede store fra forrige trinn og komponenten Provider:

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

Deretter pakker vi hovedkomponentet vårt App inn i Provider, og sender den store som en prop:

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

Og til slutt, i hoved React-komponenten App, plasserer vi følgende kode:

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

export default App

Starter vi prosjektet på nytt, ser vi i nettleservinduet: 'This is my first Redux app!'. Vi ignorerer for øyeblikket advarselen om manglende gyldig reducer. Du har klart det, gratulerer :).

Installer Redux og RTK i applikasjonen din, slik det er beskrevet i leksjonen. Forsikre deg om at applikasjonen din fungerer.