Redux un RTK instalēšana React lietotnē

Šajā nodarbībā mēs instalēsim savā lietotnē pakotni React-Redux, kas ļauj React komponentiem strādāt kopā ar Redux, un rīku Redux Toolkit (saīsināti RTK).

Atveram savu projektu un terminālī ierakstām šādu komandu:

npm install @reduxjs/toolkit react-redux

Tagad mums ir jāizveido glabātava store, kurai tiks glabāts mūsu lietotnes globālais stāvoklis. Sākumā mapē src mēs izveidosim mapi app, un tajā failu store.js. Tad šajā failā mums ir jāimportē configureStore no RTK:

import { configureStore } from '@reduxjs/toolkit'

Tālāk izveidosim tukšu store un padodam vismaz vienu reducer:

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

Lai mūsu React komponenti varētu strādāt ar store, mēs rīkosimies šādi. Iesim mūsu failā main.jsx, kurā mums jau ir kods:

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ā pievienosim rindiņas ar izveidoto iepriekšējā solī store un komponentu Provider:

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

Tad ietīsim mūsu galveno komponentu App Provider, un kā propu padodam tam store:

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

Un, beidzot, galvenajā React komponentē App ievietosim šādu kodu:

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

export default App

Palaizam vēlreiz mūsu projektu un redzam pārlūkā: 'This is my first Redux app!'. Uz brīdinājumu par derīga reducer trūkumu pagaidām nepievēršam uzmanību. Jums viss izdevās, apsveicu :).

Instalējiet savā lietotnē Redux un RTK, kā aprakstīts nodarbībā. Pārliecinieties, ka jūsu lietotne darbojas.