Redux ir RTK įdiegimas React programoje

Šioje pamokoje mes įdiegsime į mūsų programą paketą React-Redux, leidžiantį React komponentams veikti kartu su Redux, ir įrankį Redux Toolkit (sutrumpintai RTK).

Atidarykime mūsų projektą ir terminale įveskime šią komandą:

npm install @reduxjs/toolkit react-redux

Dabar mums reikia sukurti saugyklą (store), kurioje bus saugoma globali mūsų programos būsena. Pradžiai aplanke src sukursime aplanką app, o jame failą store.js. Tada į šį failą mums reikia importuoti configureStore iš RTK:

import { configureStore } from '@reduxjs/toolkit'

Toliau sukurkime tuščią store ir perduokime bent vieną reducer:

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

Kad mūsų React komponentai galėtų veikti su store, atlikime šiuos veiksmus. Eikime į mūsų failą main.jsx, kuriame jau yra kodas:

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ą pridėkime eilutes su ankstesniame etape sukurtu store ir komponentu Provider:

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

Tada apgaubkime mūsų pagrindinį komponentą App į Provider, o kaip propsą perduokime jam store:

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

Ir, galiausiai, pagrindiniame React komponente App patalpinkime šį kodą:

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

export default App

Paleiskime iš naujo mūsų projektą ir pamatysime naršyklės lange: 'This is my first Redux app!'. Į įspėjimą apie galiojančio reducerio nebuvimą kol kas nekreipkime dėmesio. Jums viskas pavyko, sveikinu :).

Įdiekite savo programoje Redux ir RTK, kaip aprašyta pamokoje. Įsitikinkite, kad jūsų programa veikia.