Redux ja RTK installimine React rakendusse

Sellel tunnil me installime oma rakendusse React-Redux paketi, mis võimaldab React komponentidel koostööd teha Reduxiga ja tööriista Redux Toolkit (lühendatult RTK).

Avame oma projekti ja sisestame terminali järgmise käsu:

npm install @reduxjs/toolkit react-redux

Nüüd peame looma poe store, kus hoitakse meie rakenduse globaalset olekut. Alustuseks kaustas src loome kausta app, ja selles faili store.js. Seejärel sellesse faili peame importima configureStore RTK-st:

import { configureStore } from '@reduxjs/toolkit'

Järgmisena loome tühja store ja edastame vähemalt ühe reduktori:

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

Selleks, et meie React komponendid saaksid töötada store'iga, teeme järgmist. Läheme oma faili main.jsx, kus meil on juba kood:

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

Impordi lisame read eelmisel samal loodud store ja komponendiga Provider:

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

Seejärel mähime oma peamise komponendi App Provider sisse ja anname sellele propsina store:

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

Ja lõpuks, põhi React komponendis App asetame järgmise koodi:

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

export default App

Käivitame oma projekti uuesti ja näeme brauseri aknas: 'This is my first Redux app!'. Hoiatusest kehtiva redutseeri puudumise kohta veel tähelepanu ei pööra. Kõik õnnestus, palju õnne :).

Installige oma rakendusse Redux ja RTK, nagu on kirjeldatud õppetükis. Veenduge, et teie rakendus töötab.