Instalarea Redux și RTK în aplicația React

În această lecție, vom instala în aplicația noastră pachetul React-Redux, care permite componentelor React să lucreze împreună cu Redux și instrumentul Redux Toolkit (prescurtat RTK).

Deschideți proiectul nostru și tastați în terminal următoarea comandă:

npm install @reduxjs/toolkit react-redux

Acum trebuie să creăm un depozit store, în care va fi stocată starea globală a aplicației noastre. Pentru început, în directorul src vom crea directorul app, iar în el fișierul store.js. Apoi în acest fișier trebuie să importăm configureStore din RTK:

import { configureStore } from '@reduxjs/toolkit'

Apoi, creăm un store gol și îi transmitem cel puțin un reducer:

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

Pentru ca componentele noastre React să poată lucra cu store-ul, vom face următoarele. Vom merge în fișierul nostru main.jsx, în care avem deja codul:

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

În importuri, vom adăuga linii cu store creat la pasul anterior și componenta Provider:

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

Apoi, vom împăcți componenta noastră principală App în Provider, și îi vom transmite ca prop store:

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

Și, în final, în componenta principală React App vom plasa următorul cod:

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

export default App

Pornim din nou proiectul nostru și vedem în fereastra browserului: 'This is my first Redux app!'. Pe avertismentul despre absența unui reducer valid îl ignorăm deocamdată. Ați reușit, felicitări :).

Instalați în aplicația dvs. Redux și RTK, după cum este descris în lecție. Asigurați-vă că aplicația dvs. funcționează.