Namestitev Redux in RTK v React aplikacijo

V tej lekciji bomo v našo aplikacijo namestili paket React-Redux, ki omogoča React komponentam delovanje v povezavi z Redux-om in orodje Redux Toolkit (okrajšano RTK).

Odprimo naš projekt in v terminalu vpišimo naslednji ukaz:

npm install @reduxjs/toolkit react-redux

Zdaj moramo ustvariti shrambo store, kjer bo shranjeno globalno stanje naše aplikacije. Za začetek v mapi src ustvarimo mapo app, in v njej datoteko store.js. Nato v to datoteko moramo uvoziti configureStore iz RTK:

import { configureStore } from '@reduxjs/toolkit'

Nato ustvarimo prazen store in mu posredujemo vsaj en reducer:

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

Da bodo naše React komponente lahko delovale s store-om, bomo naredili naslednje. Pojdimo v našo datoteko main.jsx, v kateri je že prisotna koda:

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

V uvoz dodajmo vrstice z ustvarjenim store iz prejšnjega koraka in komponento Provider:

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

Nato našo glavno komponento App ovijemo z Provider-jem in ji kot props posredujemo store:

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

In končno, v glavni React komponenti App postavimo naslednjo kodo:

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

export default App

Znova zaženemo naš projekt in vidimo v oknu brskalnika: 'This is my first Redux app!'. Na opozorilo o odsotnosti veljavnega reducerja za zdaj ne bodimo pozorni. Vse vam je uspelo, čestitam :).

V svojo aplikacijo namestite Redux in RTK, kot je opisano v lekciji. Prepričajte se, da vaša aplikacija deluje.