Installation av Redux och RTK i en React-applikation

På den här lektionen kommer vi att installera paketet React-Redux i vår applikation, vilket möjliggör för React-komponenter att fungera i kombination med Redux och verktyget Redux Toolkit (förkortat RTK).

Öppna vårt projekt och skriv i terminalen följande kommando:

npm install @reduxjs/toolkit react-redux

Nu måste vi skapa ett store (lagring), där vår applikations globala tillstånd kommer att lagras. Till att börja med, i mappen src skapar vi en mapp app, och i den en fil store.js. Sedan behöver vi importera configureStore från RTK till den här filen:

import { configureStore } from '@reduxjs/toolkit'

Därefter skapar vi ett tomt store och skickar med minst en reducer:

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

För att våra React-komponenter ska kunna arbeta med store gör vi följande. Gå in i vår fil main.jsx, där vår kod redan finns:

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 lägger vi till rader med det store som skapades i föregående steg och komponenten Provider:

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

Sedan lindar vi in vår huvudkomponent App i Provider, och skickar store till den som en prop:

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

Och slutligen, i huvudkomponenten App placerar vi följande kod:

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

export default App

Starta om vårt projekt och vi ser i webbläsarfönstret: 'This is my first Redux app!'. Bry dig inte om varningen om avsaknad av en giltig reducer för nu. Du lyckades, grattis :).

Installera Redux och RTK i din applikation, enligt beskrivningen i lektionen. Se till att din applikation fungerar.