Reduxin ja RTK:n asentaminen React-sovellukseen

Tällä oppitunnilla asennamme sovellukseemme React-Redux-paketin, joka mahdollistaa React-komponenttien yhteistyön Reduxin kanssa ja työkalun Redux Toolkit (lyhennettynä RTK).

Avataan projektimme ja kirjoitetaan terminaaliin seuraava komento:

npm install @reduxjs/toolkit react-redux

Nyt meidän on luotava store, johon sovelluksemme globaali tila tallennetaan. Aluksi kansioon src luomme kansion app, ja siihen tiedoston store.js. Sitten tähän tiedostoon meidän on tuotava configureStore RTK:sta:

import { configureStore } from '@reduxjs/toolkit'

Seuraavaksi luomme tyhjän storen ja välitämme vähintään yhden reducerin:

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

Jotta React-komponenttimme voisivat työskennellä storen kanssa, teemme seuraavat toimet. Siirrytään tiedostoon main.jsx, jossa on jo koodia:

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

Import-lauseisiin lisäämme rivit edellisellä vaiheella luodulla store:lla ja komponentilla Provider:

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

Seuraavaksi käärimme pääkomponenttimme App Provider:iin ja välitämme sille store propsina:

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

Ja lopuksi sijoitamme pääkomponenttiin App seuraavan koodin:

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

export default App

Käynnistämme projektimme uudelleen ja näemme selainikkunassa: 'This is my first Redux app!'. Varoitukseen kelvollisen reducerin puuttumisesta emme vielä kiinnitä huomiota. Onnittelut, sinä onnistuitit :).

Asenna sovellukseesi Redux ja RTK kuten oppitunnissa kuvattu. Varmista, että sovelluksesi toimii.